layer–很好用的web彈框/層。
官方鏈接：http://layer.layui.com
寫一個登陸彈框提示修改密碼
導入layer.js、jquery.js、bootStrap.js/css、jquery-validate.js
<link type="text/css" rel="stylesheet" href="<%=path %>/bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="<%=path %>/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<%=path %>/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=path%>/jquery/jquery.validate.js"></script>
<!-- 導入layer -->
<script type="text/javascript" src="<%=path%>/layer/layer.js"></script>index.jsp （登陸成功記得傳用戶session）
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span>${user.user_name}</span><i class="glyphicon glyphicon-user"></i> <span class="caret"></span></a>
<ul class="dropdown-menu">
<c:if test="${user!=null}">
<li><a href="javascript:info();">個人資料</a></li>
<li><a href="javascript:updatePSW();">修改密碼</a></li>
<li><a href="<%=path%>/loginOutput">退出</a></li>
</c:if>
<c:if test="${user==null }">
<li><a href="<%=path%>/loginInput">登錄</a></li>
</c:if>
</ul>
</li>
</ul>
</div>爲這個div添加懸停顯示下拉菜單內容事件
<script type="text/javascript">
//鼠標懸停 自動出現菜單
$(document).on("mouseenter",".dropdown",function(){
$(this).addClass("open");
})
//鼠標移除 關閉菜單
$(document).on("mouseleave",".dropdown",function(){
$(this).removeClass("open");
})
</script>效果如下：
然後登陸提示用戶是否修改密碼：
<input type="hidden" id="psw" name="login_password" value="${user.login_password }"/><script type="text/javascript">
$(document).ready(function(){
var psw=$('#psw').val();
if((psw!=""&&psw!=null&&psw.length<6)||psw=='admin'){
layer.msg('您的密碼過於簡單，建議您修改密碼！', {
time: 20000, //20s後自動關閉
btn: ['好的', '不用了'],
yes:function(index){
layer.close(index);
updatePSW();
}
});
}
})
function updatePSW(){
var index=layer.open({
type: 2,
title:'修改密碼',
fixed: true, //不固定
shadeClose: true, //點擊遮罩關閉
content: 'jsp/editPSW.jsp',
maxmin: true,
end: function () {
layer.close(index);
}
});
layer.full(index);
}爲什麼加了hidden的input呢
看看之前的文章http://blog.csdn.net/qq_36476972/article/details/70760732
判斷條件可以自行修改
效果圖：
點擊好的之後當前頁面彈出一個滿屏的窗口
說說layer裏的type屬性值：
layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）。 若你採用layer.open({type: 1})方式調用，則type爲必填項（信息框除外）
editPSW.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path=request.getContextPath();
String basePath=request.getScheme()+"//"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OA-修改密碼</title>
<script type="text/javascript" src="<%=path %>/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<%=path %>/bootstrap/js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="<%=path %>/bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="<%=path%>/jquery/jquery.validate.js"></script>
<!-- 導入layer -->
<script type="text/javascript" src="<%=path%>/layer/layer.js"></script>
<style type="text/css">
#form{
margin:0 auto;
margin-top:100px;
margin-left:350px;
}
/* 驗證錯誤信息字體顏色 */
label.error{
color:red;
display: inline-block;
}
</style>
</head>
<body>
<form class="form-horizontal" role="form" id="fm">
<input type="hidden" id="userid" name="user_id" value="${user.user_id }"/>
<input type="hidden" id="oldpsw" name="login_password" value="${user.login_password }"/>
<div id="form">
<div class="form-group">
<label class="col-sm-2 control-label"><span style="color:red;">*</span> 原密碼：</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="psw" name="password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span style="color:red;">*</span> 新密碼：</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="newpsw" name="login_password">
</div>
</div>
<br>
<div class="box-footer col-xs-5" style="text-align: center;">
<button type="submit" class="btn btn-success" style="width:200px;height:40px;">修改</button>
</div>
</div>
</form>
</body>
<script type="text/javascript">
$(function(){
$("#fm").validate({
onsubmit:true,
rules:{
password:{
required:true,
minlength:5
},
login_password:{
required:true,
minlength:5
}
},
messages: {
password: {
required: "請輸入原密碼！",
minlength: "密碼長度至少爲5！"
},
login_password: {
required: "請輸入新密碼！",
minlength: "密碼長度至少爲5！"
}
},
submitHandler:function(){
var userid=$('#userid').val();
var psw=$('#psw').val();
var oldpsw=$('#oldpsw').val();
var newpsw=$('#newpsw').val();
if(psw==oldpsw){
$.ajax({
url:'${pageContext.request.contextPath}/updatePwd',
method:'post',
data:{
user_id:userid,
login_password:newpsw
},
dataType:'json',
success:function(ret){
if(ret.status=='ok'){
layer.msg('修改成功！登錄狀態已註銷，請重新登錄！',{time:3000,icon:1});
setTimeout(function(){ location.href ='${pageContext.request.contextPath}/loginOutput'; },2000);
}else if(ret.status=='error'){
layer.msg('修改失敗！',{time:3000,icon:5});
}
},
error:function(ret){
layer.msg("ajax請求失敗！數據信息="+JSON.stringify(ret),{time:3000,icon:5});
}
})
}else{
layer.msg("原密碼輸入有誤！",{time:3000,icon:5});
}
}
})
})
</script>
</html>然後這麼寫的話就有問題：
ajax操作成功後是在當前的窗口執行跳轉，我要做的是關閉修改頁面再跳轉
網上看到的方法比如：
window.parent.location.reload();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);試了試發現 執行操作成功頁面直接關閉，ajax並沒有在父頁面跳轉，用戶還是登錄狀態。
最後的解決辦法，改動ajax執行成功後跳轉的URL
success:function(ret){
if(ret.status=='ok'){
layer.msg('修改成功！登錄狀態已註銷，請重新登錄！',{time:3000,icon:1});
setTimeout(function(){ parent.location.href ='${pageContext.request.contextPath}/loginOutput'; },2000);
}else if(ret.status=='error'){
layer.msg('修改失敗！',{time:3000,icon:5});
}
},
修改成功後子頁面兩秒後關閉，並且父頁面執行跳轉，而後登錄狀態被註銷。
。