弹出层--jquery定位小例子-原创手记-慕课网

<%@ 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" >
            <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" >
                            <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" >请输入您以前的密码</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 >可由英文/数字/特殊字符组成,长度在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 >请再次输入新的密码,必须与新密码保持一致</span></span></td>
                            </tr>
                            <tr height="50">
                                <td colspan="4" align="right"
                                    class="no_left_border no_bottom_border no_right_border">
                                    <div
                                        >
                                        <input name="sub2" id="sub2"
                                            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" >
        <div class="repeatdiv_title">
            <a href="#" onclick="updateclose();"><img
                src="${pageContext.request.contextPath}/images/X_icon.gif"
                /></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"
                        ></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&&regrpwd.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&&regrpwd.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&&regrpwd.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>