jquery alert提示框自動消失
阿新 • • 發佈:2019-02-09
第一步: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("網路異常!");
}
}
});
第四步:測試