现在的位置: 首页 > 综合 > 正文

漂亮的点击弹出的登陆框

2018年04月09日 ⁄ 综合 ⁄ 共 6515字 ⁄ 字号 小 中 大 ⁄ 评论关闭 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>漂亮的点击弹出的登陆框</title> 
  5. <meta http-equiv="content-Type" content="text/html;charset=gb2312"> 
  6. <!--把下面代码加到<head>与</head>之间--> 
  7. <style type="text/css"> 
  8. .login { z-index: +1; } 
  9. body{ font-size:12px; font-family:Arial, Helvetica, sans-serif;} 
  10. .login .inputb { width:97px; height:15px; border:1px solid #baced6; font-size:12px; padding-top:2px; margin-right:6px; display:block; float:left;} 
  11. .login_header{ 
  12. cursor:move 
  13. } 
  14. .login div.login_header 
  15. { 
  16.   border: black; 
  17.   border-bottom: 0px; 
  18.   cursor: default; 
  19.   width: 254px; 
  20.   height: 31px; 
  21.   line-height: 19px; 
  22.   vertical-align: middle; 
  23.   background: url('images/headbg.gif') no-repeat; 
  24.   text-decoration: none; 
  25. } 
  26. .login div.login_body 
  27. { 
  28.   border: black; 
  29.   width: 254px; 
  30.   background: url('images/bg.gif') no-repeat left bottom; 
  31.   margin:0; 
  32. } 
  33. .login img.login_exit 
  34. { 
  35.   float: right; 
  36.   margin: 6px 8px 0px 0px; 
  37.   cursor: pointer; 
  38. } 
  39. .login table 
  40. { 
  41.   border-collapse: collapse; 
  42.   margin-bottom:5px; 
  43. } 
  44. .login table th , .login table td { padding:3px 0;} 
  45. .login table th { width:68px; text-align:right; font-weight:normal; color:#4e6aab; } 
  46. .login .code {} 
  47. .login .code img { border:1px solid #adc6dd; margin-bottom:-5px;} 
  48. .login .lsubmit { padding-left:60px;} 
  49. .login table td .linka {  display:block; float:left; padding-top:4px; } 
  50. </style> 
  51. <script language="javascript"> 
  52. var popup_dragging = false; 
  53. var popup_target; 
  54. var popup_mouseX; 
  55. var popup_mouseY; 
  56. var popup_mouseposX; 
  57. var popup_mouseposY; 
  58. var popup_oldfunction; 
  59. function popup_display(x) 
  60. { 
  61.   var win = window.open(); 
  62.   for (var i in x) win.document.write(i+' = '+x[i]+'<br>'); 
  63. } 
  64. // ----- popup_mousedown ------------------------------------------------------- 
  65. function popup_mousedown(e) 
  66. { 
  67.   var ie = navigator.appName == "Microsoft Internet Explorer"; 
  68.   if ( ie && window.event.button != 1) return; 
  69.   if (!ie && e.button            != 0) return; 
  70.   popup_dragging = true; 
  71.   popup_target   = this['target']; 
  72.   popup_mouseX   = ie ? window.event.clientX : e.clientX; 
  73.   popup_mouseY   = ie ? window.event.clientY : e.clientY; 
  74.   if (ie) 
  75.        popup_oldfunction      = document.onselectstart; 
  76.   else popup_oldfunction      = document.onmousedown; 
  77.   if (ie) 
  78.        document.onselectstart = new Function("return false;"); 
  79.   else document.onmousedown   = new Function("return false;"); 
  80. } 
  81. // ----- popup_mousemove ------------------------------------------------------- 
  82. function popup_mousemove(e) 
  83. { 
  84.   if (!popup_dragging) return; 
  85.   var ie      = navigator.appName == "Microsoft Internet Explorer"; 
  86.   var element = document.getElementById(popup_target); 
  87.   var mouseX = ie ? window.event.clientX : e.clientX; 
  88.   var mouseY = ie ? window.event.clientY : e.clientY; 
  89.   element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px'; 
  90.   element.style.top  = (element.offsetTop +mouseY-popup_mouseY)+'px'; 
  91.   popup_mouseX = ie ? window.event.clientX : e.clientX; 
  92.   popup_mouseY = ie ? window.event.clientY : e.clientY; 
  93. } 
  94. // ----- popup_mouseup --------------------------------------------------------- 
  95. function popup_mouseup(e) 
  96. { 
  97.   if (!popup_dragging) return; 
  98.   popup_dragging = false; 
  99.   var ie      = navigator.appName == "Microsoft Internet Explorer"; 
  100.   var element = document.getElementById(popup_target); 
  101.   if (ie) 
  102.        document.onselectstart = popup_oldfunction; 
  103.   else document.onmousedown   = popup_oldfunction; 
  104. } 
  105. // ----- popup_exit ------------------------------------------------------------ 
  106. function popup_exit(e) 
  107. { 
  108.   var ie      = navigator.appName == "Microsoft Internet Explorer"; 
  109.   var element = document.getElementById(popup_target); 
  110.   popup_mouseup(e); 
  111.   element.style.visibility = 'hidden'; 
  112.   element.style.display    = 'none'; 
  113. } 
  114. // ----- popup_show ------------------------------------------------------------ 
  115. function popup_show() 
  116. { 
  117.   element      = document.getElementById('popup'); 
  118.   drag_element = document.getElementById('popup_drag'); 
  119.   exit_element = document.getElementById('popup_exit'); 
  120.   element.style.position   = "absolute"; 
  121.   element.style.visibility = "visible"; 
  122.   element.style.display    = "block"; 
  123.     element.style.left = (document.documentElement.scrollLeft+popup_mouseposX-10)+'px'; 
  124.     element.style.top  = (document.documentElement.scrollTop +popup_mouseposY-10)+'px'; 
  125.   drag_element['target']   = 'popup'; 
  126.   drag_element.onmousedown = popup_mousedown; 
  127.   exit_element.onclick     = popup_exit; 
  128. } 
  129. // ----- popup_mousepos -------------------------------------------------------- 
  130. function popup_mousepos(e) 
  131. { 
  132.   var ie = navigator.appName == "Microsoft Internet Explorer"; 
  133.   popup_mouseposX = ie ? window.event.clientX : e.clientX; 
  134.   popup_mouseposY = ie ? window.event.clientY : e.clientY; 
  135. } 
  136. // ----- Attach Events --------------------------------------------------------- 
  137. if (navigator.appName == "Microsoft Internet Explorer") 
  138.      document.attachEvent('onmousedown', popup_mousepos); 
  139. else document.addEventListener('mousedown', popup_mousepos, false); 
  140. if (navigator.appName == "Microsoft Internet Explorer") 
  141.      document.attachEvent('onmousemove', popup_mousemove); 
  142. else document.addEventListener('mousemove', popup_mousemove, false); 
  143. if (navigator.appName == "Microsoft Internet Explorer") 
  144.      document.attachEvent('onmouseup', popup_mouseup); 
  145. else document.addEventListener('mouseup', popup_mouseup, false); 
  146. </script> 
  147. </head> 
  148. <body> 
  149. <!--把下面代码加到<body>与</body>之间--> 
  150. <a href="#" onclick="popup_show()">登陆</a> 
  151. <div class="login" id="popup" style="visibility: hidden; display: none;"> 
  152. <div class="login_header" id="popup_drag"> 
  153. <img class="login_exit" id="popup_exit" src="images/close.gif" alt="关闭" /> 
  154. </div> 
  155. <div class="login_body"> 
  156. <form id="member_login" name="member_login" action="" method="post"> 
  157. <table> 
  158.   <tr> 
  159.     <th>用户名：</th> 
  160.     <td><input type="text" class="inputb" /> <span class="linka"><a href="#">快速注册</a></span></td> 
  161.   </tr> 
  162.   <tr> 
  163.     <th>密  码：</th> 
  164.     <td><input type="text" class="inputb" /> <span class="linka"><a href="#">忘记密码</a></span></td> 
  165.   </tr> 
  166.   <tr> 
  167.     <th>验证码：</th> 
  168.     <td><input type="text" class="inputb" /> <span class="code"><img src="images/code.gif" /></span></td> 
  169.   </tr> 
  170.   <tr> 
  171.     <th>Cookie：</th> 
  172.     <td><select name="select" id="select"> 
  173.     <option value="1">保持一年</option> 
  174.     </select></td> 
  175.   </tr> 
  176.   <tr> 
  177.     <td colspan="2" class="lsubmit"><input type="submit" value="登 录" /> <input type="submit" value="重 置" /></td> 
  178.   </tr> 
  179. </table> 
  180. </form> 
  181. </div> 
  182. </div> 
  183. </div> 
  184. </body> 
  185. </html> 
  186.  

 

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞