JavaScript 订阅所有【JavaScript】的日志

兼容IE,FF的弹出层登陆界面代码

作者:xiayuesong 日期:2008-07-04

字体大小: 小 中 大

这个弹出层的登录界面挺好看，很清爽所以转了过来给大家分享，要实现这个功能很简单：首先设计一个登录界面，使用css中的 display="none"将层隐藏。然后制作一个按钮点击后激活这个div层，就是onclick动作时display="";要做的好看关键是美工了。

界面图：

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title>兼容IE,FF的弹出层登陆界面 - 中国asp之家</title>  
  6.  <style type="text/css">  
  7. * {   
  8.  margin:0;   
  9.  padding:0;   
  10.  font-size:12px;   
  11.  font-weight:normal;   
  12.  font-family:verdana, tahoma, helvetica, arial, sans-serif, "宋体";   
  13.  font-style:normal;   
  14.  list-style-type:none;   
  15.  text-decoration:none;   
  16. }   
  17. div#body input#fnbtn {   
  18.  width:78px;   
  19.  height:39px;   
  20.  border:none;   
  21.  cursor:pointer;   
  22.  position:absolute;   
  23.  top:40px;   
  24.  left:100px;   
  25.  background:transparent url('/article/UploadPic/20081/4/200814122558235.png') 0 -70px no-repeat;   
  26. }   
  27. div#mask {   
  28.  position:absolute;   
  29.  top:0;   
  30.  left:0;   
  31.  background:#fff;   
  32.  filter:alpha(opacity=20);   
  33.  -moz-opacity:0.2;   
  34.  z-index:100;   
  35. }   
  36. div#login {   
  37.  position:absolute;   
  38.  top:75px;   
  39.  left:100px;   
  40.  width:293px;   
  41.  z-index:200;   
  42. }   
  43. div#login h2 {   
  44.  height:26px;   
  45.  padding-top:3px;   
  46.  padding-left:25px;   
  47.  background:transparent url('/article/UploadPic/20081/4/200814122558235.png') -84px -70px no-repeat;   
  48. }   
  49. div#login h2 input {   
  50.  height:18px;   
  51.  width:18px;   
  52.  float:right;   
  53.  border:none;   
  54.  cursor:pointer;   
  55.  margin:2px 6px 0 0;   
  56.  background:transparent url('/article/UploadPic/20081/4/200814122558235.png') 0 -169px no-repeat;   
  57. }   
  58. div#login h2 a {   
  59.  display:block;   
  60.  float:left;   
  61.  width:83px;   
  62.  height:26px;   
  63.  line-height:26px;   
  64.  text-align:center;   
  65.  text-decoration:none;   
  66.  color:#666;   
  67. }   
  68. div#login h2 a.cur {   
  69.  color:#f00;   
  70.  background:transparent url('/article/UploadPic/20081/4/200814122558235.png') 0 -187px no-repeat;   
  71. }   
  72. div#login ul {   
  73.  padding:14px 0 18px 12px;   
  74.  background:transparent url('/article/UploadPic/20081/4/200814122558235.png') -84px bottom no-repeat;   
  75. }   
  76. div#login ul li {   
  77.  padding-left:60px;   
  78.  margin-top:10px;   
  79.  display:inline-block;   
  80. }   
  81. div#login ul li {   
  82.  display:block;   
  83. }   
  84. div#login ul li:after {   
  85.  content:"youdian";   
  86.  clear:both;   
  87.  display:block;   
  88.  height:0;   
  89.  visibility:hidden;   
  90. }   
  91. div#login ul li tt {   
  92.  float:left;   
  93.  width:60px;   
  94.  margin-left:-70px;   
  95.  text-align:right;   
  96.  line-height:22px;   
  97.  color:#444;   
  98. }   
  99. div#login ul li div input.cell, div#login ul li div input.cell2 {   
  100.  height:16px;   
  101.  padding:2px;   
  102.  line-height:16px;   
  103.  width:179px;   
  104.  border:1px #dcdcdc solid;   
  105.  color:#666;   
  106. }   
  107. div#login ul li div input.cell2 {   
  108.  width:50px;   
  109. }   
  110. div#login ul li div label {   
  111.  color:#666;   
  112.  cursor:pointer;   
  113. }   
  114. div#login ul li div img {   
  115.  margin-bottom:-7px;   
  116.  margin-left:8px;   
  117. }   
  118. * html div#login ul li div img {   
  119.  margin-bottom:-4px;   
  120. }   
  121. *+html div#login ul li div img {   
  122.  margin-bottom:-4px;   
  123. }   
  124. div#login ul li div input#fnlogin {   
  125.  width:59px;   
  126.  height:21px;   
  127.  cursor:pointer;   
  128.  border:none;   
  129.  margin-right:15px;   
  130.  background:transparent url('/article/UploadPic/20081/4/200814122558235.png') 0 -148px no-repeat;   
  131. }   
  132. div#login ul li p {   
  133.  padding-top:4px;   
  134.  color:#f00;   
  135. }   
  136. </style>  
  137. </head>  
  138. <body>  
  139. <div id="body">  
  140.  <input id="fnbtn" type="button" title="" />  
  141. </div>  
  142.      
  143.   <div id="mask" style="display:none;"></div>  
  144. <div id="login" style="display:none;">  
  145.  <h2>  
  146.   <input id="fnquit" type="button" title="退出登录" />  
  147.   <a href="#" class="cur" name="Email">Email登录</a><a href="#" name="用户名">用户名登录</a>  
  148.  </h2>  
  149.  <ul>  
  150.   <form id="LoginForm" name="LoginForm" action="http://www.aspxhome.com"  method="post" enctype="multipart/form-data" >  
  151.   <li>  
  152.             <input id="loginType" name="loginType" type="hidden"/>  
  153.             <tt><label id="logtype" for="email">Email:</label></tt>  
  154.    <div><input id="username" name="username" type="text" class="cell" onKeyPress="return checkSubmit(event)"/></div>  
  155.     </li>  
  156.   <li>  
  157.    <tt><label for="password">密　码:</label></tt>  
  158.    <div><input id="password" name="password" type="password" class="cell" onKeyPress="return checkSubmit(event)" /></div>  
  159.        </li>  
  160.         <li>  
  161.    <tt></tt>  
  162.    <div><input id="reme" name="rememberme" type="checkbox" />　<label for="reme">下次自动登录</label>  
  163.    </div>  
  164.   </li>  
  165.   <li>  
  166.    <tt></tt>  
  167.    <div><input id="fnlogin" type="button"/><a href="#" onclick="return checkForgetPassword()">忘记密码?</a></div>  
  168.   </li>  
  169.   </form>  
  170.  </ul>  
  171. </div>  
  172. <script type="text/javascript">  
  173. function g(obj) {   
  174.  return document.getElementById(obj);   
  175. }   
  176. var login = {   
  177.  title:null,   
  178.  show:function(){   
  179.   var sWidth,sHeight;   
  180.   sWidth = screen.width;   
  181.   sWidth = document.body.offsetWidth;   
  182.   sHeight=document.body.offsetHeight;   
  183.   if (sHeight<screen.height){sHeight=screen.height;}   
  184.   g("mask").style.width = sWidth + "px";   
  185.   g("mask").style.height = sHeight + "px";   
  186.   g("mask").style.display = "block";   
  187.   g("login").style.display = "block";   
  188.   g("login").style.right = g("body").offsetLeft + "px";   
  189.      
  190. //  window.status = g("body").offsetLeft;   
  191.  },   
  192.  hide:function(){   
  193.   g("mask").style.display = "none";   
  194.   g("login").style.display = "none";   
  195.  }   
  196. }   
  197. g("fnbtn").onclick = function(){   
  198.  login.show();   
  199.  this.blur();   
  200.  this.style.backgroundPosition = "0 -109px";   
  201. };   
  202. g("fnlogin").onclick = function() {   
  203.     // The following 5 lines of code is used to get the login type & pass to the form   
  204.     // One More line of code is insert to root_index.jsp to capture the hidden value   
  205.     if (document.getElementById("logtype").innerHTML == "Email:") {   
  206.         document.getElementById('loginType').value = 'email';   
  207.     } else {   
  208.         document.getElementById('loginType').value = 'mobile';     
  209.     }   
  210.     document.LoginForm.submit();   
  211. };   
  212. g("fnquit").onclick = function(){login.hide();g("fnbtn").style.backgroundPosition = "0 -70px";};   
  213. var aa = g("login").getElementsByTagName("a");   
  214. var aTab = new Array();   
  215. for(var i=0; i<aa.length; i++){   
  216.  if(aa[i].parentNode.nodeName == "H2"){   
  217.   aTab.push(aa[i]);   
  218.  }   
  219. }   
  220. for(var j=0; j<aTab.length; j++){   
  221.  aTab[j].onclick = function(){   
  222.   this.blur();   
  223.   if (this.className != "cur"){   
  224.    for(var k=0; k<aTab.length; k++){aTab[k].className = ""};   
  225.    this.className = "cur"  
  226.    g("logtype").innerHTML = this.name + ":";   
  227.         }   
  228.  }   
  229. }   
  230. </script>  
  231. <script language="javascript">  
  232. login.hide();   
  233. </script>  
  234. </body>  
  235. </html>  

 



[本日志由 xiayuesong 于 2008-08-08 11:51 AM 编辑]
文章来自:
引用通告: 查看所有引用 | 我要引用此文章
Tags: IE FF 弹出层
相关日志:
评论: 0 | 引用: 0 | 查看次数: 1754
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 1000 字 | UBB代码 关闭 | [img]标签 关闭