Js to implement global message prompt

preface

The Ant Design component library was used for development in the previous project, and I found the message global prompt function interesting, so I spent some time researching it. Supports five prompts: Success, error, info, warning, and Loading. You can remove it automatically or set a delay. Is a lightweight way to prompt without interrupting the user’s actions. Let’s see how that works.

Page structure

<div class="overlay">
    <ul class="message-list"></ul>
</div>
Copy the code

style

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
                
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    The /* element will never be the target of mouse events */
    pointer-events: none;
}

.message-list {
    position: fixed;
    top: 30px;
    left: 0;
    right: 0;
    list-style: none;
}

.message-item {
    display: flex;
    justify-content: center;
    padding: 8px;
}

.message-item div {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: #FFF;
    border-radius: 2px;
    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
}

.message-item .icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

/* loading /* /
.message-item .icon.loading {
    animation: loading 1s linear infinite;
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.message-item div span {
    font-size: 14px;
    line-height: 20px;
}

.fade-in {
    animation: fadeIn .3s ease forwards;
}

/* Fade into animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0); }}/* Fade out animation */
.fade-out {
    animation: fadeOut .3s ease forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-100%); }}Copy the code

code

/* Constructor */
function Message() {}/* Used to remove message */
Message.id = 0;
/** * Create global prompt *@param {string} Content Indicates the content *@param {number} Duration Duration *@param {string} Type Prompt type */
Message.prototype.create = function (content, duration, type) {
    // SVG is too long, omitted here
    const icon = {
        success: '
      '.error: '
      '.info: '
      '.warning: '
      '.loading: '
      '
    }
    const html = `
        <li class="message-item fade-in" data-id="${Message.id}">
            <div>
                ${icon[type]}
                <span>${content}</span>
            </div>
        </li>`;
    ul.insertAdjacentHTML('beforeend', html);
    Message.id++;
    const lis = document.querySelectorAll('li.message-item');
    const length = lis.length;
    const lastLi = lis[length - 1];
    // Delay removal
    lastLi._timeout = setTimeout(function () {
        lastLi.classList.remove('fade-in');
        lastLi.classList.add('fade-out');
        lastLi.addEventListener('animationend'.function (e) {
            this.remove();
        });
    }, duration);
    // Displays a maximum of 7 entries
    if (length > 7) {
        clearTimeout(lis[0]._timeout);
        lis[0].remove();
    }
}
Message.prototype.success = function (content, duration = 3000) {
    this.create(content, duration, 'success');
    return Message.id;
}
Message.prototype.error = function (content, duration = 3000) {
    this.create(content, duration, 'error');
    return Message.id;
}
Message.prototype.warning = function (content, duration = 3000) {
    this.create(content, duration, 'warning');
    return Message.id;
}
Message.prototype.info = function (content, duration = 3000) {
    this.create(content, duration, 'info');
    return Message.id;
}
Message.prototype.loading = function (content, duration = 3000) {
    this.create(content, duration, 'loading');
    return Message.id;
}
Message.prototype.remove = function (id) {
    const li = document.querySelector(`li.message-item[data-id="${id}"] `);
    clearTimeout(li._timeout);
    li.remove();
}

/ / call
const message = new Message();
const id = message.success('This is a message of success');
/ / remove
message.remove(id);
Copy the code

Demo: jsdemo. Codeman. Top/HTML/messag…