一般都用統(tǒng)一的提示樣式, 自己寫小demo的時(shí)候也會(huì)去寫些雜七雜八的東西, 記錄一下

• JavaScript部分

// 提示框
    function message(val) {
        if ($(".message").length == 0) {
            // 定義val的參數(shù)
            const { message, type = "success", duration = 2000 } = val;
            // 成功的樣式
            // 獲取body
            var body = document.body;
            // 創(chuàng)建div
            var div = document.createElement("div");
            var i = document.createElement("i");
            i.classList.add("icon-sv");
            // 獲取要提示的文本
            // 把文本添加進(jìn)剛創(chuàng)建的div里面
            // body里加上這個(gè)樣式
            div.setAttribute("class", "message");
            // 如果為成功, 就改成成功的樣式
            if (type === "success") {
                div.classList.add("success");
                i.classList.add("icon-sv-success");
            } else if (type == "error") {
                div.classList.add("error");
                i.classList.add("icon-sv-error")
            } else if (type == "warning") {
                div.classList.add("warning");
                i.classList.add("icon-sv-warning")
            } else {
                div.classList.add("info");
            }
            div.appendChild(i);
            var text = document.createTextNode(message);
            div.appendChild(text);

            // 把div添加進(jìn)body里面
            body.appendChild(div);

            // 給個(gè)定時(shí)器, 兩秒鐘后關(guān)閉, 再刪除創(chuàng)建的這個(gè)div
            setTimeout(() => {
                // div.style.top = "-45px";
                body.removeChild(div);
            }, duration);
        }
    }

• css部分

/* 提示框樣式 */
    .message {
        min-width: 300px;
        max-width: 500px;
        min-height: 45px;
        text-align: center;
        align-items: center;
        padding: 10px 30px;
        box-sizing: border-box;
        margin: auto;
        font-size: 16px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -60px;
        margin-left: -150px;
        transition: all .4s ease;
        z-index: 5000;
        box-shadow: 1px 1px 5px rgb(0 0 0 / 20%);
        border-radius: 2px;
    }

    .message i {
        margin-right: 10px;
    }

    .success {
        background-color: #f7fbef;
        color: #63c339;
    }

    .error {
        background-color: #fff3f7;
        color: #f76d6b;
    }

    .warning {
        background-color: #fdf6ec;
        color: #e6a23c;
    }

    .info{
        background-color: #000;
        color: #fff;
        opacity: .5;
    }

• 使用示例

message({
    message: "message提示消息",
    type: "info",
    duration: 2000
})

也可以把css部分放進(jìn)js部分, 由js去添加css, 不過(guò)懶得弄了, 就這樣吧