简单的遮罩层弹出框(弹出一个表单,里面包含验证码,验证码正确方可提交)

<link href="${config.TemplateDir}css/base.css" rel="stylesheet" type="text/css">
<link href="${config.TemplateDir}css/layout.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${config.TemplateDir}js/jquery.js"></script>
<script type="text/javascript" src="${config.TemplateDir}js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="${config.TemplateDir}layer/layer.min.js"></script>
<script type="text/javascript" src="${config.TemplateDir}js/public.js"></script>

<script language="javascript" type="text/javascript" src="${config.TemplateDir}scripts/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="${config.TemplateDir}scripts/common.js"></script>
<script language="javascript" type="text/javascript" src="${config.TemplateDir}scripts/css.js"></script>
<script language="javascript" type="text/javascript" src="${config.TemplateDir}scripts/validator.js"></script>
<script language="javascript" type="text/javascript" src="${config.TemplateDir}scripts/form.js"></script>
<link href="/images/themes/demo/member.css" rel="stylesheet" type="text/css" />
<link href="/images/themes/demo/modal.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript">
</script> 
<!--[if IE 6]>
 <script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
 <script>
   DD_belatedPNG.fix('.wsp_box h2,.wsp_box .wb_footer,.wsp_box2 .wb_content');
 </script>
<![endif]-->
</head>

<body>
<div class="wrapper">
    <div class="header">
           <div class="clear CH16"></div>
        
        <div class="wsp_box">
            <h2></h2>
            <div class="wb_content">        
                <h3 class="tit3">XXXXXXX</h3>
                <ul class="peo_list">
    #set($sqlnext = "select * from cms_content cc,cms_U_Vote uv where cc.GeneralID=uv.GeneralID and TrabeType='XXXXXXX'")
    #set($next = $cms.GetSQL($sqlnext))
  #if($next.Count>0)
    #foreach($n in $next)
                    <li><a href="${app_path}templateTest.aspx?GeID=$n.GeneralID"><a href="$!{cms.AppPath}/ajaxtestpage.aspx?GeID=$n.GeneralID"><img src="$n.PicUrl"></a></a><strong> $n.Number -$n.Name</strong>
                     <p>$cms.Cut($n.Summary,44,"...")</p> 
                      <a class="btn"onClick="javascript:jQuery.layer({v_istitle:false,v_src:'$!{cms.AppPath}/Search.aspx?GeneralID=$n.GeneralID',v_area:['400px','200px'],v_offset:['50px',''],v_box:2,v_btns:0});" href="javascript:void(0)">投我一票<em>$n.VoteCount票</em></a></li>

                     #end
                 #end 
                </ul>
                <div class="clear"></div>
                
                
                <h3 class="tit3 tit3a">XXXXX</h3>
                               <ul class="peo_list">
    #set($sqlnext = "select * from cms_content cc,cms_U_Vote uv where cc.GeneralID=uv.GeneralID and TrabeType='XXXXX'")
    #set($i=1)
    #set($next = $cms.GetSQL($sqlnext))
  #if($next.Count>0)
    #foreach($n in $next)
                    <li><a href="${app_path}templateTest.aspx?GeID=$n.GeneralID"><a href="${app_path}templateTest.aspx?GeID=$n.GeneralID"><img src="$n.PicUrl"></a></a><strong> $n.Number -$n.Name</strong>
                    <p>$cms.Cut($n.Summary,44,"...")</p> 
                      <a class="btn" onClick="ShowDIV($n.GeneralID)" href="#">投我一票<em>$n.VoteCount票</em></a></li>
                      #set($i=$i+1)
                     #end
            #end 
                </ul>
                <div class="clear"></div>
                
                
                <h3 class="tit3 tit3b">XXXXXXXX</h3>
                    <ul class="peo_list">
    #set($sqlnext = "select * from cms_content cc,cms_U_Vote uv where cc.GeneralID=uv.GeneralID and TrabeType='XXXXXX'")
    #set($i=1)
    #set($next = $cms.GetSQL($sqlnext))
  #if($next.Count>0)
    #foreach($n in $next)
                    <li><a href="${app_path}templateTest.aspx?GeID=$n.GeneralID"><a href="${app_path}templateTest.aspx?GeID=$n.GeneralID"><img src="$n.PicUrl"></a></a><strong> $n.Number -$n.Name</strong>
                     <p>$cms.Cut($n.Summary,44,"...")</p> 
                      <a class="btn" href="$!{cms.AppPath}/ajaxtestpage.aspx?GeneralID= ${n.GeneralID}">XXXXXX<em>$n.VoteCountXXX</em></a></li>
                      #set($i=$i+1)
                     #end
            #end 
                </ul>
                 <div class="clear"></div>
            </div>
           <div class="wb_footer"></div> 
        </div>    
        
    </div>
    <div class="footer"></div>
</div>
  <!--遮罩层显示的DIV1-->
  <div id="BgDiv"></div>

  <div id="DialogDiv" style="display:none">
    <h2>输入验证码<a href="#" id="btnClose" onclick="closeDiv('DialogDiv')">关闭</a></h2>
   <div class="form">
    <form action="$!{cms.AppPath}/ajaxtestpage.aspx" method="post" enctype="multipart/form-data" name="registerform" id="registerform">
   <table style=" 300px; height:100px;">
       <tr>
        <td style="50px;">验证码:</td>
        <td><input name="checkcodestr" type="text" style="ime-mode:disabled" require="true" datatype="limit|ajax" min="4" max="5" msgid="code" msg="验证码必须填写|" size="8" url="${cms.AppPath}/ajaxuser.aspx?action=checkverifycode" />
            &nbsp;<img src="${app_path}captcha.aspx" id="checkcode" onClick="this.src='${app_path}captcha.aspx?id='+Math.random()*5;" style="cursor:pointer;" alt="验证码,看不清楚?请点击刷新验证码" align="absmiddle" class="color_1" />&nbsp;<span class="color_1"></span><span id="code"></span></td>
      </tr>
            <tr>
        <th></th>
        <td><input type="submit"  value="确定" /><input type="hidden" id="Gid" name="Gid" value="" />
      </tr>
   </table>
</form>
   </div>
  </div>
  <!--遮罩层结束-->
  
    <style type="text/css">      
      #BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
      
      #DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
      #DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
      #DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
      #DialogDiv .form{padding:10px;}
  </style>
 <script language="javascript" type="text/javascript">
   function ShowDIV(ID) {
          $("#BgDiv").css({ display: "block", height: $(document).height() });
          var yscroll = document.documentElement.scrollTop;
          $("#DialogDiv"  ).css("top", "100px");
          $("#DialogDiv"  ).css("display", "block");
    document.documentElement.scrollTop = 0;
    document.getElementById("Gid").value=ID;
      }

      function closeDiv(thisObjID) {
          $("#BgDiv").css("display", "none");
          $("#" + thisObjID).css("display", "none");
      }
 </script>

</body>
</html>
<script language="javascript" type="text/javascript">

    $().ready(function() {
        $('form').checkForm(1);
    });

    $('#reg_password').blur(function() {
        ShowStrong();
    });

    function CharMode(iN) {
        if (iN >= 65 && iN <= 90)
            return 2;
        if (iN >= 97 && iN <= 122)
            return 4;
        else
            return 1;
    }

    function bitTotal(num) {
        modes = 0;
        for (i = 0; i < 3; i++) {
            if (num & 1) modes++;
            num >>>= 1;
        }
        return modes;
    }

    function checkStrong(sPW) {
        Modes = 0;

        for (i = 0; i < sPW.length; i++) {
            //测试每一个字符的类别并统计一共有多少种模式.
            Modes |= CharMode(sPW.charCodeAt(i));
        }
        var btotal = bitTotal(Modes);
        if (sPW.length >= 10) btotal++;
        switch (btotal) {
            case 1:
                return "pw_check_1";
                break;
            case 2:
                return "pw_check_2";
                break;
            case 3:
                return "pw_check_3";
                break;
            default:
                return "pw_check_1";
        }
    }

    function ShowStrong() {
        var data = checkStrong($('#reg_password').val());
        pw_id = '#' + data;
        $(".pw_check").hide();
        $(pw_id).show();
    }
 
</script>
原文地址:https://www.cnblogs.com/zwnet/p/2644963.html