首页手记弹出层--jquery定位小例子

弹出层--jquery定位小例子

标签：

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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="${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
                class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="${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"
                        class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="${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>

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

android零基础入门

Web前端工程师

手记
篇

粉丝

97

获赞与收藏

603

关注作者，订阅最新文章

相关文章推荐

jquery 弹出框

jquery ui弹出窗口 dialog

弹出层效果

jquery特效弹出框

弹出遮罩层后，如何禁止底层页面的滚动

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

弹出层--jquery定位小例子

相关文章推荐

阅读免费教程