jquery自定义提示框

127 阅读1分钟
/* 弹框提示 */
.showMessage {
    padding: 10px 20px;
    border-radius: 5px;
    position: fixed;
    top: 15%;
    left: 50%;
    color: #ffffff;
    z-index: 999;
    transform: translate(-50%, 0);
}
.showMessageError {
    background-color: #666;
     color: #fff;
}    

js调用

showMessage("注册成功");

function showMessage(message) {
    let messageJQ = $("<div class='showMessage'>" + message + "</div>");
    messageJQ.addClass("showMessageError");
    // 先将原始隐藏,然后添加到页面,最后以400毫秒的速度下拉显示出来
    messageJQ.hide().appendTo("body").slideDown(400);
    // 4秒之后自动删除生成的元素
    window.setTimeout(function () {
        messageJQ.show().slideUp(400, function () {
            messageJQ.remove();
        })
    }, 4000);
}