SOURCE

const domHtml = document.querySelector('html');

// create
let count = 1;
const domCreateBtn = document.createElement('button');
domCreateBtn.setAttribute('type', 'button');
domCreateBtn.textContent = 'create';
domHtml.appendChild(domCreateBtn);
domCreateBtn.onclick = function() {
    message(`错误提示${count}`, `输入内容不能为空${count}！`, 'error');
    count++;
}

function message(msgTitle = '标题', msgText = '内容', msgType = 'info') {
    // box
    const domMsgBox = document.createElement('div');
    domMsgBox.setAttribute('class', 'msg-box');
    domHtml.appendChild(domMsgBox);

    // title
    const domMsgTitle = document.createElement('div');
    domMsgTitle.setAttribute('class', 'msg-title');
    domMsgTitle.textContent = msgTitle;
    domMsgBox.appendChild(domMsgTitle);

    // content
    const domMsgCont = document.createElement('div');
    domMsgCont.setAttribute('class', 'msg-cont');
    domMsgBox.appendChild(domMsgCont);

    // type
    const domMsgType = document.createElement('i');
    domMsgType.textContent = msgType;
    domMsgCont.appendChild(domMsgType);
    switch(msgType) {
        case 'info':
            domMsgType.setAttribute('class', 'msg-type msg-type-info');
            break;
        case 'warn':
            domMsgType.setAttribute('class', 'msg-type msg-type-warn');
            break;
        case 'error':
            domMsgType.setAttribute('class', 'msg-type msg-type-error');
            break;
        default:
            domMsgType.parentNode.removeChild(domMsgType);  
    }

    // text
    const domMsgText = document.createElement('p');
    domMsgText.setAttribute('class', 'msg-text');
    domMsgText.textContent = msgText;
    domMsgCont.appendChild(domMsgText);

    // close
    const domCloseBtn = document.createElement('span');
    domCloseBtn.setAttribute('class', 'msg-close-btn');
    domCloseBtn.textContent = 'x';
    domMsgBox.appendChild(domCloseBtn);

    domCloseBtn.onclick = function(){
        domMsgBox.parentNode.removeChild(domMsgBox);
    }
}

.msg-box {
    position: relative;
    width: 400px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #eee;
    margin: 20px;
}
.msg-title {
    line-height: 40px;
    padding: 0 10px;
    background-color: #fafafa;
    border-bottom: 1px solid #eee;
}

.msg-type {
    padding: 5px;
    font-style: normal;
    border-radius: 2px;
}

.msg-type-info {
    color: #fff;
    background-color: #09f;
}

.msg-type-warn {
    background-color: orange;
}

.msg-type-error {
    color: #fff;
    background-color: #f45;
}

.msg-cont {
    padding: 20px;
    line-height: 1.5;
    text-align: center;
}

.msg-text {
}

.msg-close-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #eee;
    cursor: pointer;
}