弹出层登陆障眼法（原创）
要做做一个弹出窗登陆,试了好几种方法也没成功后来整了一个这样的办法,原页面就有一个登陆，其实就是障眼法呵呵．．忽优一下
代码
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: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;width: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"> </td>
223 </tr>
224 <tr>
225 <td width="435" height="15" align="left" valign="middle"> </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> </p>
237 <p> </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> <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"> <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(3, 1); %>
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"> <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;width: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;width: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=" 登 陆 "/> <input type="button" id="div_btcancel" value=" 取 消 " onclick="ShowNo()"/></div>
309
310 </div>
311 </div>
312 </div>
313 <!--登录层结束-->
314 </form>
315
316 </html>
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: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;width: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"> </td>
223 </tr>
224 <tr>
225 <td width="435" height="15" align="left" valign="middle"> </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> </p>
237 <p> </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> <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"> <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(3, 1); %>
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"> <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;width: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;width: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=" 登 陆 "/> <input type="button" id="div_btcancel" value=" 取 消 " onclick="ShowNo()"/></div>
309
310 </div>
311 </div>
312 </div>
313 <!--登录层结束-->
314 </form>
315
316 </html>
-------此处无银三百两------
