在经典论坛又看到一个效果，最近喜欢上了前台，也把这个效果给学习了一下，并且增加了一些新的东西。咋们先看效果吧

提示：你可以先修改部分代码再运行。

效果其实很简单，就是一个登陆框，类似鲜果的登陆。不过鲜果做到了在FF下还是一样的半透明效果，我还未增加此效果。我在代码上面做了些注释，放上来，大家一起学习下，感觉代码还能再精简，可惜小弟不才，希望高手能够改善。

1. css
css中，关键是利用position:absolute和z-index，一个是将层浮动与页面，另一个是让层显示顺序,#check中使用了居中对齐，这个方法是网上查找的，注意top,left属性和margin为高度的1/2即可.可以修改代码测试一下

  1. body,div{ margin:0;padding:0;}
  2.     #cake{
  3.         display:none;
  4.         background:#000;
  5.         position:absolute;
  6.         z-index:1000;
  7.         width:100%;
  8.         height:100%;
  9.         filter:Alpha(opacity=50);
  10.     }
  11.     #view_content{
  12.         display:none;
  13.         position: absolute;
  14.         width: 100%;
  15.         padding-top: 20%;
  16.         z-index: 1001;
  17.         left:0px;
  18.         top:0px;
  19.     }
  20.     #view_content table{
  21.         background: #ff7300;
  22.         font-size:14px;
  23.         filter:progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=4,offY=4,positives=true);
  24.     }
  25.     #view_content table tbody{
  26.         background:#FEB16B;
  27.     }
  28.     #check{
  29.         display:none;
  30.         position: absolute;
  31.         width: 300px;
  32.         font-size:12px;
  33.         padding:2px;
  34.         margin: -50px 0 0 -150px;
  35.         z-index: 1002;
  36.         left:50%;
  37.         top:40%;
  38.         text-align:center;
  39.         border:3px solid #0CF;
  40.         background:#fff;
  41.     }

2. Javascript
js的写法其实很简单，就是利用了display的2个属性，加上setTimeout的定时，注意out不是大写的O。

  1. function openCake(){
  2.     document.getElementById('cake').style.display='block';
  3.     document.getElementById('view_content').style.display='block';
  4. }
  5. function loginCake(){
  6.     document.getElementById('check').style.display='block';
  7.     setTimeout("changeP(check)",3000);
  8. }
  9. function changeP(o){
  10.     document.getElementById('check').innerHTML="!!!!登陆完成!!!!!,5秒钟后退出";
  11.     setTimeout("closeCake()",3000);
  12. }
  13. function closeCake(){
  14.     document.getElementById("cake").style.display="none";
  15.     document.getElementById("view_content").style.display="none";
  16.     document.getElementById('check').style.display='none';
  17. }

3.html
代码应该没有问题，表格对齐我使用了一个align=”center”,下面使用了一个align=”right”我觉得应该会有更好的方法

  1. <div id="cake"></div>
  2.   <div id="view_content">
  3.   <table align="center">
  4.         <thead>
  5.             <tr>
  6.                 <td>登录框</td>
  7.                 <td align="right"><button class="out" onclick="closeCake()">x</button></td>
  8.             </tr>
  9.         </thead>
  10.         <tbody>
  11.             <tr>
  12.                 <td>用户名</td>
  13.                 <td><input type="text" name="username" /></td>
  14.             </tr>
  15.             <tr>
  16.                 <td>密&nbsp;码</td>
  17.                 <td><input type="text" name="pwd" /></td>
  18.             </tr>
  19.         </tbody>
  20.         <tfoot>
  21.             <tr>
  22.                 <td colspan="2" ><button onclick="loginCake()">确定登陆</button></td>
  23.             </tr>
  24.         </tfoot>
  25.   </table>
  26.   </div>
  27.   <div id="check">登录中....</div>
  28.   <div id="wrap">
  29.     <button onclick="openCake()">点击登陆</button>
  30.     这是一个小小的测试
  31.   </div>


无觅相关文章插件，快速提升流量