$$demo <button onclick="alertMessage('这是一条信息')">显示信息</button> <button onclick="alertSuccess('这是一条信息')">显示成功信息</button> <button onclick="alertWarning('这是一条信息')">显示警告信息</button> <button onclick="alertError('这是一条信息')">显示错误信息</button> <button onclick="showMsg({msg:'这是一条信息', duration: 10000})"> 显示10秒的信息 </button> <script> if (!document.querySelector(".message-container")) { const container = document.createElement("div") container.classList.add("message-container")

    document.body.append(container)
}

function showMsg({ msg = "", type = "message", duration = 5000 } = {}) {
    const container = document.querySelector(".message-container")

    const text = document.createElement("div")
    text.innerText = msg
    text.classList.add("text")
    text.classList.add(type)

    container.append(text)

    setTimeout(() => text.classList.add("animation"), 0)
    setTimeout(() => text.classList.remove("animation"), duration - 1000)
    setTimeout(() => text.remove(), duration)
}

let alertMessage = (msg) => showMsg({ msg, type: "message" })
let alertSuccess = (msg) => showMsg({ msg, type: "success" })
let alertError = (msg) => showMsg({ msg, type: "error" })
let alertWarning = (msg) => showMsg({ msg, type: "warning" })

</script>

<style> html { min-height: 400px; } .message-container { position: fixed; top: 0; left: 0; right: 0; width: max-content;

    margin: auto;
}

.message-container .text {
    width: 400px;
    padding: 20px;
    border-radius: 6px;

    font-size: 14px;
    font-weight: bold;
    line-height: 20px;

    margin: 0 auto;

    transition: all 1s;

    opacity: 0;
    margin-top: -60px;
}
.message-container .animation {
    opacity: 1;
    margin-top: 20px;
}

.message-container .error {
    background-color: #fef0f0;
    color: #f56c6c;
}
.message-container .warning {
    background-color: #fdf6ec;
    color: #e6a23c;
}
.message-container .success {
    background-color: #f0f9eb;
    color: #67c23a;
}
.message-container .message {
    background-color: #f4f4f5;
    color: #909399;
}

</style>

$$