首页 前端知识 jQuery实现消息提示框

jQuery实现消息提示框

2024-02-02 09:02:21 前端知识 前端哥 908 38 我要收藏

创建一个消息提示方法

/**
 * 弹出消息提示框,采用浏览器布局,位于整个页面中央,默认显示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);
        }
    }
});

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1133.html
标签
评论
发布的文章

jQuery ---- 插件

2024-02-15 14:02:06

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!