jquery alert提示框自动消失

来源：互联网发布：优酷网络剧合作模式编辑：程序博客网时间：2024/05/17 01:44

第一步：jsp页面body里面准备一个div

<div class="alert"></div>

第二步：准备一些共用样式css

<style type="text/css">    #getVerifyCode{cursor: pointer; outline: none;}    .alert {    display: none;    position: fixed;    top: 50%;    left: 50%;    min-width: 200px;    margin-left: -100px;    z-index: 99999;    padding: 15px;    border: 1px solid transparent;    border-radius: 4px;}.alert-success {    color: #3c763d;    background-color: #dff0d8;    border-color: #d6e9c6;}.alert-info {    color: #31708f;    background-color: #d9edf7;    border-color: #bce8f1;}.alert-warning {    color: #8a6d3b;    background-color: #fcf8e3;    border-color: #faebcc;}.alert-danger {    color: #a94442;    background-color: #f2dede;    border-color: #ebccd1;}    </style>

第三步：根据返回结果使用弹出自动消失alert

$.ajax({    type: "POST",    url: "${pageContext.request.contextPath}/user/setNewPwd",    data: {phone:phone,verifyCode:verifyCode,newPwd:newPwd},    dataType: "json",    success: function(data){    if(data.status == 500){    $('.alert').html('密码修改成功').addClass('alert-success').show().delay(2500).fadeOut();     //$('<div>').appendTo('body').addClass('alert alert-success').html('操作成功').show().delay(1500).fadeOut();

//跳转url    doReload();    }else if(data.status == 502){    alert("验证码不一致！");     }else{    alert("网络异常！");    }    }});

第四步：测试

阅读全文

1 0