Js实现点击超链接弹出层，效果仿Discuz登录！

主要应用到的是dispaly:none 和 dispaly:block;来控制实现的；

 <a id="link" href="#" onclick="linkonclick()">登录</a>这里还有一种写法

 <a href="javascript:linkonclick()">登录</a> 

两种效果是一样的；

 

View Code

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > 点击超链接弹出层 </ title >
     < style  type ="text/css" >
        *
         {
            margin :  0px ;
            padding :  0px ;
         }
        body
         {
            background-image :  url("../Images/Lv.gif") ;
            font-size :  12px ;
         }
        body a
         {
            font-size :  100px ;
            color :  #FFF ;
            text-decoration :  none ;
         }
        .login
         {
            background :  #FFF ;
            width :  560px ;
            height :  360px ;
            position :  absolute ;
            top :  310px ;
            left :  510px ;
            padding :  10px ;
            z-index :  20 ;
            display :  none ;
         }
        .login ul
         {
            list-style :  none ;
            margin-left :  100px ;
            margin-top :  50px ;
         }
        
        .clear
         {
            background :  #FFF ;
            display :  none ;
            width :  600px ;
            height :  400px ;
            position :  absolute ;
            top :  300px ;
            left :  500px ;
            z-index :  10 ;
            filter :  alpha(opacity=40) ;
            opacity :  0.4 ;
         }
     </ style >
     < script  type ="text/javascript"  language ="javascript" >
         function  linkonclick() {
             var  divs  =  document.getElementsByTagName( " div " );
             for  ( var  i  =   0 ; i  <  divs.length; i ++ ) {
                 var  newdiv  =  divs[i];
                newdiv.style.display  =   " block " ;
            }
        }

         function  btnclick() {
             var  divs  =  document.getElementsByTagName( " div " );
             for  ( var  i  =   0 ; i  <  divs.length; i ++ ) {
                 var  newdiv  =  divs[i];
                newdiv.style.display  =   " none " ;
            }
        }
     </ script >
</ head >
< body >
     < a  id ="link"  href ="#"  onclick ="linkonclick()" > 登录 </ a >
     < div  class ="login" >
         < ul >
             < li >
                 < p >
                    用户名: </ p >
                 < input  id ="Text1"  type ="text"   />
             </ li >
             < li >
                 < p >
                    密 &nbsp;&nbsp; 码: </ p >
                 < input  id ="Text2"  type ="text"   />
             </ li >
             < li >
                 < input  id ="button"  type ="button"  value ="关闭"  onclick ="btnclick()"   /></ li >
         </ ul >
     </ div >
     < div  class ="clear" >
     </ div >
</ body >
</ html >