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

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

代码
  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-------
原文地址:https://www.cnblogs.com/qq4004229/p/1777296.html