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>
<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,
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);
}
看看之前的文章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>
<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});
}
},
修改成功后子页面两秒后关闭，并且父页面执行跳转，而后登录状态被注销。
。
转载请注明原文地址: https://www.6miu.com/read-50312.html
