jQuery实现消息提示框

创建一个消息提示方法/*** 弹出消息提示框，采用浏览器布局，位于整个页面中央，默认显示3秒* 后面的消息会覆盖原来的消息* @param message：待显示的消息* @param type：消息类型，0：错误消息，1：成功消息*/function showMessage(message, type) {let messageJQ= $("<div class='showMessage'

天尘不打野

8514人浏览 · 2022-03-08 11:34:49

天尘不打野 · 2022-03-08 11:34:49 发布

创建一个消息提示方法

/**
 * 弹出消息提示框，采用浏览器布局，位于整个页面中央，默认显示3秒
 * 后面的消息会覆盖原来的消息
 * @param message：待显示的消息
 * @param type：消息类型，0：错误消息，1：成功消息
 */
function showMessage(message, type) {
    let messageJQ= $("<div class='showMessage'>" + message + "</div>");
    if (type == 0) {
        messageJQ.addClass("showMessageError");
    } else if (type == 1) {
        messageJQ.addClass("showMessageSuccess");
    }
    // 先将原始隐藏，然后添加到页面，最后以400毫秒的速度下拉显示出来
    messageJQ.hide().appendTo("body").slideDown(400);
    // 4秒之后自动删除生成的元素
    window.setTimeout(function() {
        messageJQ.show().slideUp(400, function() {
            messageJQ.remove();
        })
    }, 4000);
}

css样式

.showMessage {
    padding: 10px 20px;
    border-radius: 5px;
    position: fixed;
    top: 15%;
    left: 50%;
    color: #ffffff;
    z-index: 999;
    transform: translate(-50%, 0);
}

.showMessageSuccess {
    background-color: #f0f9eb;
    border: 1px solid #E1F3D8;
    color: #67c23a;
}

.showMessageError {
    background-color: #fef0f0;
    border: 1px solid #fde2e2;
    color: #F76C6C;
}

使用消息提示框

let data = {
    cellPhone: $("#phone2").val(),
    verifyCode: $("#authcode2").val(),
    password: $.md5($("#newpwd3").val()),
    passMd5ed: true
}
$.ajax({
    type: "put", // 请求方式
    contentType: "application/json",
    url: register + "v1/register", // 地址，就是json文件的请求路径
    dataType: "json", // 数据类型可以为 text xml json  script  jsonp
    data: JSON.stringify(data),
    success: function(res) { // 返回的参数就是 action里面所有的有get和set方法的参数
        if (res.resultCode === "00000000") {
            // 成功消息
            showMessage("注册成功", 1);
        } else {
            // 失败消息
            showMessage(res.resultMsg, 0);
        }
    }
});