弹出层--jquery定位小例子
2012-03-19 19:15
197 查看
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>修改密码</title>
<link href="${pageContext.request.contextPath}/css/main.css"
rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/base.css"
rel="stylesheet" type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
</head>
<body>
<div class="rihgt_memu">
<div class="container" style="height: 560px;">
<div class="tab_list">
<h1>修改密码</h1>
<div class="table2">
<form action="" name="querForm" id="querFormId" method="post">
<input type="hidden" name="id" id="id" value="${manager.id}" />
<table width="80%" class="fieldset" border="0" cellpadding="0"
cellspacing="0" style="margin-top: 15px; height: 200px;">
<tr>
<td width="33%" align="right" class="gray"><label>
<span id="span1">${msg}</span> 旧密码
</label></td>
<td align="left"><span> <input type="password"
name="password" id="password" value="${password}"
class="input_text_300" maxlength="12" onblur="oldpasword();" />
<span id="div1" style="color: #bbb;">请输入您以前的密码</span></span></td>
</tr>
<tr>
<td align="right" class="gray"><label> <span
id="span2"></span> 新密码
</label></td>
<td align="left"><span> <input type="password"
name="newpaswd" id="newpaswd" value="${newpaswd}"
class="input_text_300" maxlength="12" onblur="newpassword();" />
<span style="color: #bbb;">可由英文/数字/特殊字符组成,长度在6到12个字符</span></span></td>
</tr>
<tr>
<td align="right" class="gray"><label> <span
id="span3"></span>确认新密码
</label></td>
<td align="left"><span> <input type="password"
name="rnewpaswd" id="rnewpaswd" value=""
class="input_text_300" maxlength="12" onblur="againPaswrd();" />
<span style="color: #bbb;">请再次输入新的密码,必须与新密码保持一致</span></span></td>
</tr>
<tr height="50">
<td colspan="4" align="right"
class="no_left_border no_bottom_border no_right_border">
<div
style="clear: both; text-align: center; margin-top: 10px; margin-bottom: 10px;">
<input name="sub2" id="sub2" style="color: #fff;"
type="button" class="button_bg2"
onMouseOver="this.className='button_bg2_on'"
onmouseout="this.className='button_bg2'"
value="提交修改" />
</div>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<!-- 弹出层 -->
<div id="div_repeat" class="repeatdiv" style="visibility: hidden;">
<div class="repeatdiv_title">
<a href="#" onclick="updateclose();"><img
src="${pageContext.request.contextPath}/images/X_icon.gif"
style="margin: 5px 5px 0 0;" /></a>
</div>
<div class="repeatdiv_table">
<table width="100%" cellpadding="0" cellspacing="0"
id="advance_table" border="0">
<input type="hidden" id="mesidhid" value="" />
<tr>
<td align="right"><img id="imgiss"
src="${pageContext.request.contextPath}/images/login_success_ico.gif"
width="24" height="24" /></td>
<td align="left"><span id="uppaswordId"
style="font-size: 12px; font-weight: bold; color: #0a6505;"></span></td>
</tr>
</table>
</div>
</div>
</body>
<script language="javascript">
//验证旧密码格式
var regrpwd = /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,12}$/;
function oldpasword() {
var password = $("#password").val();
if(password.length>0&&!regrpwd.test(password)) {
$("#span1").empty();
$("#span1").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
return;
}else if(password.length>0&®rpwd.test(password)){
$("#span1").empty();
$("#span1").html("<img src='${pageContext.request.contextPath}/images/sucess.gif'/>");
return;
}
else if(password.length==0) {
$("#span1").empty();
return;
}
}
//验证新密码格式
function newpassword() {
var newpaswd = $("#newpaswd").val();
if(newpaswd.length>0&&!regrpwd.test(newpaswd)) {
$("#span2").empty();
$("#span2").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
return;
}
else if(newpaswd.length>0&®rpwd.test(newpaswd)){
$("#span2").empty();
$("#span2").html("<img src='${pageContext.request.contextPath}/images/sucess.gif'/>");
return;
}
else if(newpaswd.length==0){
$("#span2").empty();
return;
}
}
//验证再次输入的密码与新密码是否一致
function againPaswrd() {
if($("#rnewpaswd").val().length>0&&!regrpwd.test($("#rnewpaswd").val())){
$("#span3").empty();
$("#span3").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
return;
}
else if($("#newpaswd").val()!=$("#rnewpaswd").val()) {
$("#span3").empty();
$("#span3").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
return;
}else if($("#rnewpaswd").val().length>0&®rpwd.test($("#rnewpaswd").val())){
$("#span3").empty();
$("#span3").html("<img src='${pageContext.request.contextPath}/images/sucess.gif'/>");
return;
}
else if($("#rnewpaswd").val().length==0) {
$("#span3").empty();
return;
}
}
//提交修改
function setPassword() {
var password = $("#password").val();
var newpaswd = $("#newpaswd").val();
var rnewpaswd = $("#rnewpaswd").val();
var i=0;
//验证登陆名
if(!regrpwd.test(password)) {
$("#span1").empty();
$("#span1").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
i=1;
}
/* else {
$("#span1").empty();
$("#span1").html("<img src='/beyondsoft/images/sucess.gif'/>");
} */
if(!regrpwd.test(newpaswd)) {
$("#span2").empty();
$("#span2").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
i=1;
}
/* else{
$("#span1").empty();
$("#span1").html("<img src='/beyondsoft/images/sucess.gif'/>");
} */
if(!regrpwd.test(rnewpaswd)) {
$("#span3").empty();
$("#span3").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
i=1;
}
else if(rnewpaswd!=newpaswd) {
$("#span3").empty();
$("#span3").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
i=1;
}
if(i==0){
$.ajax({//post方式可以提交中文不会出现乱码.get会出现乱码
url : "${pageContext.request.contextPath}/admin/manager/setpaswd",
type : "post",
data : {upassword:password,unewpaswd:newpaswd},
success : function(fdata) {
if( fdata==0 ) { //表示原密码输入错误
$("#mesidhid").val(0);
$("#uppaswordId").css("color","red").text("旧密码输入错误");
$("#imgiss").attr("src","${pageContext.request.contextPath}/images/error_ico.jpg");
var content = window.document.getElementById("div_repeat");
//弹出(设置透明度为1并且visibility为visible)
content.style.opacity = "1";
content.style.visibility = "visible";
$(content).css("left",$('#div1').offset().left).css("top",$('#div1').offset().top);
//3秒自动消失(设置透明度先为1后为0并且visibility为hidden)
$("#div_contents4").fadeTo(3000,1,function(){
content.style.opacity = "0";
content.style.visibility="hidden";
});
}
else if(fdata == -1) {
$("#mesidhid").val(-1);
$("#uppaswordId").css("color","red").text("发生异常,密码修改失败");
$("#imgiss").attr("src","${pageContext.request.contextPath}/images/error_ico.jpg");
var content = window.document.getElementById("div_repeat");
//弹出(设置透明度为1并且visibility为visible)
content.style.opacity = "1";
content.style.visibility = "visible";
$(content).css("left", ($(window.document.body).width() - $(content).width()) / 2);
//3秒自动消失(设置透明度先为1后为0并且visibility为hidden)
$("#div_contents4").fadeTo(3000,1,function(){
content.style.opacity = "0";
content.style.visibility="hidden";
});
}
else if(fdata == 1) {
$("#mesidhid").val(1);
$("#uppaswordId").css("color","red").text("密码修改成功");
$("#imgiss").attr("src","${pageContext.request.contextPath}/images/login_success_ico.gif");
var content = window.document.getElementById("div_repeat");
//弹出(设置透明度为1并且visibility为visible)
content.style.opacity = "1";
content.style.visibility = "visible";
$(content).css("left", ($(window.document.body).width() - $(content).width()) / 2);
//3秒自动消失(设置透明度先为1后为0并且visibility为hidden)
$("#div_contents4").fadeTo(3000,1,function(){
content.style.opacity = "0";
content.style.visibility="hidden";
});
window.setTimeout("relogin('${pageContext.request.contextPath}/admin/login')",3100);
}
}
});
}
}
//关闭弹出的删除提示层
function updateclose() {
var content3 = document.getElementById("div_repeat");
content3.style.visibility="hidden";
if($("#mesidhid").val()==1){
relogin('${pageContext.request.contextPath}/admin/login');
}
}
function relogin(logurl) {
location.href=logurl;
}
</script>
</html>
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>修改密码</title>
<link href="${pageContext.request.contextPath}/css/main.css"
rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/base.css"
rel="stylesheet" type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
</head>
<body>
<div class="rihgt_memu">
<div class="container" style="height: 560px;">
<div class="tab_list">
<h1>修改密码</h1>
<div class="table2">
<form action="" name="querForm" id="querFormId" method="post">
<input type="hidden" name="id" id="id" value="${manager.id}" />
<table width="80%" class="fieldset" border="0" cellpadding="0"
cellspacing="0" style="margin-top: 15px; height: 200px;">
<tr>
<td width="33%" align="right" class="gray"><label>
<span id="span1">${msg}</span> 旧密码
</label></td>
<td align="left"><span> <input type="password"
name="password" id="password" value="${password}"
class="input_text_300" maxlength="12" onblur="oldpasword();" />
<span id="div1" style="color: #bbb;">请输入您以前的密码</span></span></td>
</tr>
<tr>
<td align="right" class="gray"><label> <span
id="span2"></span> 新密码
</label></td>
<td align="left"><span> <input type="password"
name="newpaswd" id="newpaswd" value="${newpaswd}"
class="input_text_300" maxlength="12" onblur="newpassword();" />
<span style="color: #bbb;">可由英文/数字/特殊字符组成,长度在6到12个字符</span></span></td>
</tr>
<tr>
<td align="right" class="gray"><label> <span
id="span3"></span>确认新密码
</label></td>
<td align="left"><span> <input type="password"
name="rnewpaswd" id="rnewpaswd" value=""
class="input_text_300" maxlength="12" onblur="againPaswrd();" />
<span style="color: #bbb;">请再次输入新的密码,必须与新密码保持一致</span></span></td>
</tr>
<tr height="50">
<td colspan="4" align="right"
class="no_left_border no_bottom_border no_right_border">
<div
style="clear: both; text-align: center; margin-top: 10px; margin-bottom: 10px;">
<input name="sub2" id="sub2" style="color: #fff;"
type="button" class="button_bg2"
onMouseOver="this.className='button_bg2_on'"
onmouseout="this.className='button_bg2'"
value="提交修改" />
</div>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<!-- 弹出层 -->
<div id="div_repeat" class="repeatdiv" style="visibility: hidden;">
<div class="repeatdiv_title">
<a href="#" onclick="updateclose();"><img
src="${pageContext.request.contextPath}/images/X_icon.gif"
style="margin: 5px 5px 0 0;" /></a>
</div>
<div class="repeatdiv_table">
<table width="100%" cellpadding="0" cellspacing="0"
id="advance_table" border="0">
<input type="hidden" id="mesidhid" value="" />
<tr>
<td align="right"><img id="imgiss"
src="${pageContext.request.contextPath}/images/login_success_ico.gif"
width="24" height="24" /></td>
<td align="left"><span id="uppaswordId"
style="font-size: 12px; font-weight: bold; color: #0a6505;"></span></td>
</tr>
</table>
</div>
</div>
</body>
<script language="javascript">
//验证旧密码格式
var regrpwd = /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,12}$/;
function oldpasword() {
var password = $("#password").val();
if(password.length>0&&!regrpwd.test(password)) {
$("#span1").empty();
$("#span1").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
return;
}else if(password.length>0&®rpwd.test(password)){
$("#span1").empty();
$("#span1").html("<img src='${pageContext.request.contextPath}/images/sucess.gif'/>");
return;
}
else if(password.length==0) {
$("#span1").empty();
return;
}
}
//验证新密码格式
function newpassword() {
var newpaswd = $("#newpaswd").val();
if(newpaswd.length>0&&!regrpwd.test(newpaswd)) {
$("#span2").empty();
$("#span2").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
return;
}
else if(newpaswd.length>0&®rpwd.test(newpaswd)){
$("#span2").empty();
$("#span2").html("<img src='${pageContext.request.contextPath}/images/sucess.gif'/>");
return;
}
else if(newpaswd.length==0){
$("#span2").empty();
return;
}
}
//验证再次输入的密码与新密码是否一致
function againPaswrd() {
if($("#rnewpaswd").val().length>0&&!regrpwd.test($("#rnewpaswd").val())){
$("#span3").empty();
$("#span3").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
return;
}
else if($("#newpaswd").val()!=$("#rnewpaswd").val()) {
$("#span3").empty();
$("#span3").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
return;
}else if($("#rnewpaswd").val().length>0&®rpwd.test($("#rnewpaswd").val())){
$("#span3").empty();
$("#span3").html("<img src='${pageContext.request.contextPath}/images/sucess.gif'/>");
return;
}
else if($("#rnewpaswd").val().length==0) {
$("#span3").empty();
return;
}
}
//提交修改
function setPassword() {
var password = $("#password").val();
var newpaswd = $("#newpaswd").val();
var rnewpaswd = $("#rnewpaswd").val();
var i=0;
//验证登陆名
if(!regrpwd.test(password)) {
$("#span1").empty();
$("#span1").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
i=1;
}
/* else {
$("#span1").empty();
$("#span1").html("<img src='/beyondsoft/images/sucess.gif'/>");
} */
if(!regrpwd.test(newpaswd)) {
$("#span2").empty();
$("#span2").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
i=1;
}
/* else{
$("#span1").empty();
$("#span1").html("<img src='/beyondsoft/images/sucess.gif'/>");
} */
if(!regrpwd.test(rnewpaswd)) {
$("#span3").empty();
$("#span3").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
i=1;
}
else if(rnewpaswd!=newpaswd) {
$("#span3").empty();
$("#span3").html("<img src='${pageContext.request.contextPath}/images/fail.gif'/>");
i=1;
}
if(i==0){
$.ajax({//post方式可以提交中文不会出现乱码.get会出现乱码
url : "${pageContext.request.contextPath}/admin/manager/setpaswd",
type : "post",
data : {upassword:password,unewpaswd:newpaswd},
success : function(fdata) {
if( fdata==0 ) { //表示原密码输入错误
$("#mesidhid").val(0);
$("#uppaswordId").css("color","red").text("旧密码输入错误");
$("#imgiss").attr("src","${pageContext.request.contextPath}/images/error_ico.jpg");
var content = window.document.getElementById("div_repeat");
//弹出(设置透明度为1并且visibility为visible)
content.style.opacity = "1";
content.style.visibility = "visible";
$(content).css("left",$('#div1').offset().left).css("top",$('#div1').offset().top);
//3秒自动消失(设置透明度先为1后为0并且visibility为hidden)
$("#div_contents4").fadeTo(3000,1,function(){
content.style.opacity = "0";
content.style.visibility="hidden";
});
}
else if(fdata == -1) {
$("#mesidhid").val(-1);
$("#uppaswordId").css("color","red").text("发生异常,密码修改失败");
$("#imgiss").attr("src","${pageContext.request.contextPath}/images/error_ico.jpg");
var content = window.document.getElementById("div_repeat");
//弹出(设置透明度为1并且visibility为visible)
content.style.opacity = "1";
content.style.visibility = "visible";
$(content).css("left", ($(window.document.body).width() - $(content).width()) / 2);
//3秒自动消失(设置透明度先为1后为0并且visibility为hidden)
$("#div_contents4").fadeTo(3000,1,function(){
content.style.opacity = "0";
content.style.visibility="hidden";
});
}
else if(fdata == 1) {
$("#mesidhid").val(1);
$("#uppaswordId").css("color","red").text("密码修改成功");
$("#imgiss").attr("src","${pageContext.request.contextPath}/images/login_success_ico.gif");
var content = window.document.getElementById("div_repeat");
//弹出(设置透明度为1并且visibility为visible)
content.style.opacity = "1";
content.style.visibility = "visible";
$(content).css("left", ($(window.document.body).width() - $(content).width()) / 2);
//3秒自动消失(设置透明度先为1后为0并且visibility为hidden)
$("#div_contents4").fadeTo(3000,1,function(){
content.style.opacity = "0";
content.style.visibility="hidden";
});
window.setTimeout("relogin('${pageContext.request.contextPath}/admin/login')",3100);
}
}
});
}
}
//关闭弹出的删除提示层
function updateclose() {
var content3 = document.getElementById("div_repeat");
content3.style.visibility="hidden";
if($("#mesidhid").val()==1){
relogin('${pageContext.request.contextPath}/admin/login');
}
}
function relogin(logurl) {
location.href=logurl;
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery 弹出框定位实现方法
- jquery鼠标放上去显示悬浮层即弹出定位的div层
- JQuery 弹出框 定位坐标
- JQuery弹出层例子
- JQuery插件-Layui弹出层的一个例子
- jquery鼠标放上去显示悬浮层即弹出定位的div层
- jquery弹出div定位混乱问题
- jQuery点击弹出下拉菜单的小例子
- jquery鼠标放上去显示悬浮层即弹出定位的div层
- 简单的 jQuery 弹出的例子
- jQuery mouseover弹出title以及弹出大图的例子
- JQuery 弹出框定位实现方法
- jquery鼠标放上去显示悬浮层即弹出定位的div层
- jQuery点击弹出下拉菜单的小例子
- JQuery 弹出框 定位
- jquery鼠标放上去显示悬浮层（弹出div层）定位
- Jquery定位弹出div
- JQuery写的一个弹出提示层与定位的小代码
- 基于zepto或jquery的手机端弹出框成功，失败，加载特效
- 在需要的位置，弹出Div层；jquery获取对象坐标|