弹出层--jquery定位小例子-白红宇

弹出层--jquery定位小例子

阅读量：5904 次

发布时间：2019-06-19

本文共 8363 字，大约阅读时间需要 27 分钟。

<%@ 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">

<head>

rel="stylesheet" type="text/css" />

rel="stylesheet" type="text/css" />

</head>

<body>

<table width="80%" class="fieldset" border="0" cellpadding="0"

cellspacing="0" style="margin-top: 15px; height: 200px;">

<tr>

<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" οnblur="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" οnblur="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" οnblur="againPaswrd();" />

<span style="color: #bbb;">请再次输入新的密码,必须与新密码保持一致</span></span></td>

</tr>

<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'"

οnmοuseοut="this.className='button_bg2'"

value="提交修改" />

</div>

</td>

</tr>

</table>

</form>

</div>

<a href="#" οnclick="updateclose();"><img

src="${pageContext.request.contextPath}/p_w_picpaths/X_icon.gif"

style="margin: 5px 5px 0 0;" /></a>

</div>

<table width="100%" cellpadding="0" cellspacing="0"

id="advance_table" border="0">

<tr>

<td align="right"><img id="imgiss"

src="${pageContext.request.contextPath}/p_w_picpaths/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>

</body>

//验证旧密码格式

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}/p_w_picpaths/fail.gif'/>");

return;

}else if(password.length>0&&regrpwd.test(password)){

$("#span1").empty();

$("#span1").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/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}/p_w_picpaths/fail.gif'/>");

return;

}

else if(newpaswd.length>0&&regrpwd.test(newpaswd)){

$("#span2").empty();

$("#span2").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/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}/p_w_picpaths/fail.gif'/>");

return;

}

else if($("#newpaswd").val()!=$("#rnewpaswd").val()) {

$("#span3").empty();

$("#span3").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/fail.gif'/>");

return;

}else if($("#rnewpaswd").val().length>0&&regrpwd.test($("#rnewpaswd").val())){

$("#span3").empty();

$("#span3").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/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}/p_w_picpaths/fail.gif'/>");

i=1;

}

/* else {

$("#span1").empty();

$("#span1").html("<img src='/beyondsoft/p_w_picpaths/sucess.gif'/>");

} */

if(!regrpwd.test(newpaswd)) {

$("#span2").empty();

$("#span2").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/fail.gif'/>");

i=1;

}

/* else{

$("#span1").empty();

$("#span1").html("<img src='/beyondsoft/p_w_picpaths/sucess.gif'/>");

} */

if(!regrpwd.test(rnewpaswd)) {

$("#span3").empty();

$("#span3").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/fail.gif'/>");

i=1;

}

else if(rnewpaswd!=newpaswd) {

$("#span3").empty();

$("#span3").html("<img src='${pageContext.request.contextPath}/p_w_picpaths/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}/p_w_picpaths/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}/p_w_picpaths/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}/p_w_picpaths/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>

转载于:https://blog.51cto.com/3131854/810707

你可能感兴趣的文章

简单的运用ExecutorService多线程爬虫

Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds

php 5.3.8版本,针对sql server 2008的注释编辑查看工具程序

通过TortoiseGIT怎么把本地项目上传到GitHub

查看>>

用ajax提交数据到ashx用JSON.stringify格式化参数后在服务器端取不到值？[转载至：http://q.cnblogs.com/q/34266/]...

查看>>