溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

彈出層--jquery定位小例子

發(fā)布時間：2020-06-16 13:27:51 來源：網(wǎng)絡(luò) 閱讀：915 作者：panguixiang 欄目：web開發(fā)

<%@ 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">
                <h2>修改密碼</h2>
                <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>&nbsp;舊密碼
                                </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>&nbsp;新密碼
                                </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;">可由英文/數(shù)字/特殊字符組成,長度在6到12個字符</span></span></td>
                            </tr>
                            <tr>
                                <td align="right" class="gray"><label> &nbsp;<span
                                        id="span3"></span>確認(rèn)新密碼
                                </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}/p_w_picpaths/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}/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>
    </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}/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方式可以提交中文不會出現(xiàn)亂碼.get會出現(xiàn)亂碼
                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");
                        //彈出(設(shè)置透明度為1并且visibility為visible)
                        content.style.opacity = "1";
                        content.style.visibility = "visible";
                        $(content).css("left",$('#div1').offset().left).css("top",$('#div1').offset().top);
                        //3秒自動消失(設(shè)置透明度先為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("發(fā)生異常,密碼修改失敗");
                        $("#imgiss").attr("src","${pageContext.request.contextPath}/p_w_picpaths/error_ico.jpg");
                        var content = window.document.getElementById("div_repeat");
                        //彈出(設(shè)置透明度為1并且visibility為visible)
                        content.style.opacity = "1";
                        content.style.visibility = "visible";
                        $(content).css("left", ($(window.document.body).width() - $(content).width()) / 2);
                        //3秒自動消失(設(shè)置透明度先為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");
                        //彈出(設(shè)置透明度為1并且visibility為visible)
                        content.style.opacity = "1";
                        content.style.visibility = "visible";
                        $(content).css("left", ($(window.document.body).width() - $(content).width()) / 2);
                        //3秒自動消失(設(shè)置透明度先為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);
                    }
                }
            });
      }
     
}

//關(guān)閉彈出的刪除提示層
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>
 

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手