• 弹出层登陆障眼法(原创)


    要做做一个弹出窗登陆,试了好几种方法也没成功后来整了一个这样的办法,原页面就有一个登陆,其实就是障眼法呵呵..忽优一下

    代码
      1 
      2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      3 <html xmlns="http://www.w3.org/1999/xhtml">
      4 <head>
      5 <meta http-equiv="X-UA-Compatible" content="IE=7" />
      6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      7 <title></title>
      8 
      9 
     10 
     11 
     12 
     13     <script src="js/jquery.js" type="text/javascript"></script>
     14 
     15    
     16     <script src="Script/login.js" type="text/javascript"></script>
     17  <script>
     18  $(function(){
     19      
     20         //用户点击显示登陆层
     21  $("#img_dlogin").click(function(){
     22         showFloat();
     23  });    
     24          
     25  $("#div_txtname").keyup(function(){
     26 
     27   $("#username").attr("value", $("#div_txtname").val());
     28  
     29  });
     30 
     31   $("#div_txtpwd").keyup(function(){
     32 
     33   $("#userpwd").attr("value", $("#div_txtpwd").val());
     34  
     35  }); 
     36  $("#div_btlogin").click(function(){
     37  gologin();
     38  })
     39  
     40  //用户点击显示登陆层结束
     41             
     42             
     43             
     44             
     45             //找回密码
     46             $("#im_findpwd").click(function(){
     47             
     48             window.location ="UserReg/UserFindPwd.aspx";
     49             
     50             });
     51             
     52             
     53             //IP用登陆
     54             $("#im_ipuser").click(function(){
     55             window.location.href ="login.aspx";
     56             
     57             });
     58             
     59             // e用户注册/UserReg/default.aspx
     60             $("#im_reg").click(function(){
     61             window.location.href ="UserReg/UsercountRegister.aspx?type=teacher";
     62             
     63             });
     64             
     65             
     66               $("#txtcode").submit(function(){
     67             
     68               gologin();
     69                });
     70             
     71             
     72             
     73             //g开始登陆
     74             
     75             $("#img_login").click(function(){
     76             gologin();
     77             
     78             
     79 });
     80             
     81             
     82             
     83             
     84             
     85             //检查输入
     86             function checklogin(){
     87             if($("#username").val()=="username"){ $("#lb_state").attr("innerHTML","用户名不能为空");return false;}
     88             
     89             if($("#userpwd").val()=="username"){  $("#lb_state").attr("innerHTML","密码不能为空");return false;}
     90             
     91             
     92          
     93              return true;
     94             
     95             }
     96             
     97             
     98             //检查是否记住密码
     99             function checkkeep(){
    100             if($("#ck_Keep").checked==true)return true;
    101              else return false
    102                }
    103                
    104                //进入首页
    105                
    106                function godefault(){
    107                window.location="default.aspx";
    108                }
    109             
    110             
    111             function gologin(){
    112             SetPwdAndChk();//记住密码
    113             if(checklogin()==false)
    114             {
    115             return;
    116             }
    117             else{
    118         
    119             
    120             
    121             
    122         var mes=Telesa.StartLogin($("#username").val(),$("#userpwd").val(),checkkeep()).value;
    123 
    124   if(mes=="d"){godefault();}
    125   if(mes=="c"){alert("您的帐号将要到期请与当地教育局联系");godefault();}
    126   if(mes=="b"){alert("对不起您的帐号已经到期请与管理员联系");}
    127   if(mes=="a"){alert("用户名或密码错误,请确认");}
    128  if(mes=="e"){ window.location="UserReg/CardCountRegister.aspx";}
    129 }
    130             }
    131             
    132             
    133             
    134             
    135             
    136             
    137         });
    138  </script>
    139  
    140  
    141 <script type="text/javascript" language="javascript"> 
    142 function ShowNo() 
    143 
    144 document.getElementById("doing").style.display="none"
    145 document.getElementById("divLogin").style.display="none"
    146 
    147 function gID(id) 
    148 
    149 return (document.getElementById) ? document.getElementById(id) : document.all[id] ; 
    150 
    151 function showFloat() 
    152 
    153 var range = getRange(); 
    154 gID('doing').style.width = range.width + "px"
    155 gID('doing').style.height = range.height + "px"
    156 gID('doing').style.display = "block"
    157 document.getElementById("divLogin").style.display=""
    158 
    159 function getRange() 
    160 
    161 var top = document.body.scrollTop; 
    162 var left = document.body.scrollLeft; 
    163 var height = document.body.clientHeight; 
    164 var width = document.body.clientWidth; 
    165 
    166 if (top==0 && left==0 && height==0 && width==0
    167 
    168 top = document.documentElement.scrollTop; 
    169 left = document.documentElement.scrollLeft; 
    170 height = document.documentElement.clientHeight; 
    171 width = document.documentElement.clientWidth; 
    172 
    173 return {top:top ,left:left ,height:height ,width } ; 
    174 
    175 </script>
    176  </head>
    177 
    178 
    179 <style type="text/css"  rel="stylesheet">
    180 
    181 body,td,th {
    182     font-family: 宋体;
    183     font-size: 12px;
    184 }
    185 body {
    186     margin-left: 0px;
    187     margin-top: 0px;
    188     margin-right: 0px;
    189     margin-bottom: 0px;
    190 }
    191 .educationNews{margin-top:8px;267px;float:right;}
    192 .educationNews ul{margin:0;padding:0;font:12px/24px "宋体";color:#ababab;}
    193 .educationNews li{list-style:none;}
    194 .educationNews a,.educationNews a:hover{font:12px/24px "宋体";}
    195 .educationNews a{color:#ababab;text-decoration:none;}
    196 .educationNews a:hover{color:#ff9000;text-decoration:underline;}
    197 #more{float:right;}
    198 .css {
    199     font-family: "宋体";
    200     font-size: 12px;
    201     color: #484848;
    202 }
    203 .a {
    204     font-family: "宋体";
    205     font-size: 12px;
    206     color: #ABABAB;
    207     text-decoration:none;
    208 }
    209 .a a{text-decoration:none;
    210 color: #ABABAB;
    211 }
    212 .a a:hover {color: #FF9000;text-decoration:underline;
    213 }
    214 </style>
    215 
    216 <body>
    217 <form id="form1" runat="server">
    218 <table width="753" height="574" border="0" align="center" cellpadding="0" cellspacing="0">
    219   <tr>
    220     <td width="574" height="136" align="left" valign="top" background="images/im/index-01.jpg"><table width="746" border="0" cellspacing="0" cellpadding="0">
    221       <tr>
    222         <td height="75" colspan="2">&nbsp;</td>
    223       </tr>
    224       <tr>
    225         <td width="435" height="15" align="left" valign="middle">&nbsp;</td>
    226         <td width="311" height="22" align="left" valign="middle" bgcolor="#03BFFE"><div id="billTitle">
    227 
    228 <marquee direction="left" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
    229 <span style=" color:White;"><%=hourse %></span>
    230 </marquee>  
    231 </div><td>
    232       </tr>
    233     </table></td>
    234   </tr>
    235   <tr>
    236     <td height="366" align="right" valign="top" background="images/im/index-03.jpg"><p>&nbsp;</p>
    237       <p>&nbsp;</p>  
    238       <table width="225" height="138" border="0" cellpadding="0" cellspacing="0">
    239         <tr>
    240           <td height="23" colspan="2" align="left" valign="bottom"><input name="username" type="text" class="input_login" id="username" onfocus="this.select()" onmouseover="this.focus()" size="18"  /></td>
    241         </tr>
    242         <tr>
    243           <td width="149" height="23" align="left" valign="middle"><input name="username" type="password" id="userpwd" size="18" /></td>
    244           <td width="76" align="left" valign="middle"><a href="#"><img src="images/im/index-05.jpg" name="Image1" width="60" height="14" border="0" id="im_findpwd" /></a></td>
    245         </tr>
    246         <tr>
    247           <td height="20" colspan="2" align="left" valign="middle"><input name="rememberpassword" class="rememberpassword" type="checkbox" checked="checked"  id="ck_Keep"/>
    248           <a href="#"><img src="images/im/index-07.jpg" name="Image2" width="81" height="12" border="0" id="Image2" /></a></td>
    249         </tr>
    250         <tr>
    251           <td height="20" colspan="2" align="left" valign="middle"><a href="#"><img src="images/im/index-08.jpg" name="Image3" width="45" height="20" border="0" id="img_login" /></a>&nbsp;&nbsp;<a href="#" ><img src="images/im/index-09.jpg" name="Image4" width="45" height="20" border="0" id="im_ipuser" /></a></td>
    252         </tr>
    253         <tr>
    254           <td height="21" colspan="2" align="left" valign="middle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img src="images/im/index-06.jpg" name="Image5" width="74" height="19" border="0" id="im_reg" /></a></td>
    255         </tr>
    256       </table>      
    257       <br />
    258       <br />
    259       <br />
    260       <table width="705" height="111" border="0" cellpadding="0" cellspacing="0">
    261         <tr>
    262           <td width="439" height="78"></td>
    263           <td width="266" rowspan="2" align="left" valign="middle">
    264           
    265  <div class="educationNews"><ul><%BindNews(31); %>
    266   <li id="more"><a href="/index/indexnews.aspx" target="_blank">查看更多</a></li>
    267   </ul></div>
    268 
    269          </td>
    270         </tr>
    271         <tr>
    272           <td height="33" align="left" valign="top">&nbsp;&nbsp;<img src="images/im/index-04.jpg" width="401" height="31" border="0" usemap="#Map" id="img_dlogin" /></td>
    273         </tr>
    274       </table></td>
    275   </tr>
    276   <tr>
    277     <td height="72" align="left" valign="top"><img src="images/im/index-02.jpg" width="753" height="72" border="0" usemap="#Map2" /></td>
    278   </tr>
    279 </table>
    280 
    281 
    282 
    283 
    284 </body>
    285 
    286 
    287 
    288 
    289 
    290 
    291 <!--登录层开始--> 
    292 <div id="doing" style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;100%;height:100%;z-index:1000;position: absolute;left:0;top:0;display:none;overflow: hidden;"> 
    293 </div> 
    294 <!--加一个登录层--> 
    295 <div id="divLogin" style="border:solid 10px #898989;background:#fff;padding:10px;580px; height:300px; z-index:1001; position: absolute; display:none;top:50%; left:50%;margin:-200px 0 0 -300px;"> 
    296 <div style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;" > 
    297 <div> 
    298 用户: 
    299 <input type="text" id="div_txtname" />
    300 </div> 
    301 <div> 
    302 密码: 
    303 <input type="password" id="div_txtpwd" />
    304 </div> 
    305 <br/> 
    306 <div> 
    307 <div style=" padding-left:50px;">
    308  <input type="button" id="div_btlogin"  value=" 登 陆 "/>&nbsp;&nbsp;<input type="button" id="div_btcancel"  value=" 取 消 "  onclick="ShowNo()"/></div>
    309 
    310 </div> 
    311 </div> 
    312 </div> 
    313 <!--登录层结束--> 
    314 </form>
    315 
    316 </html>
    -------长沙程序员技术交流QQ群:428755207-------
  • 相关阅读:
    angular5 二维码插件
    ag-grid 设置默认选中多行
    断点续传和下载原理分析
    Volley 实现原理图
    Volley全方位解析,带你从源码的角度彻底理解
    23种设计模式
    android service
    Android drawable微技巧
    Android ListView实现不同item的方法和原理分析
    Android 网络框架 volley源码剖析
  • 原文地址:https://www.cnblogs.com/qq4004229/p/1777296.html
Copyright © 2020-2023  润新知