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});
}
},
修改成功后子页面两秒后关闭,并且父页面执行跳转,而后登录状态被注销。
。