兼容IE,FF很酷的弹出层登陆界面

<! 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 >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" />
< title > 登陆界面 </ title >
     < style  type ="text/css" >
*  {
    margin : 0 ;
    padding : 0 ;
    font-size : 12px ;
    font-weight : normal ;
    font-family : verdana, tahoma, helvetica, arial, sans-serif, "宋体" ;
    font-style : normal ;
    list-style-type : none ;
    text-decoration : none ;
}
div#body input#fnbtn  {
    width : 78px ;
    height : 39px ;
    border : none ;
    cursor : pointer ;
    position : absolute ;
    top : 14px ;
    left : 18px ;
    background : transparent url('http://www.youdian.com/images/index/default/logbg_v2.png') 30px -70px no-repeat ;
}
div#mask  {
    position : absolute ;
    top : 0 ;
    left : 0 ;
    background : #fff ;
    filter : alpha(opacity=20) ;
    -moz-opacity : 0.2 ;
    z-index : 100 ;
}
div#login  {
    position : absolute ;
    top : 20px ;
    left : 283px ;
    width : 293px ;
    z-index : 200 ;
}
div#login h2  {
    height : 26px ;
    padding-top : 3px ;
    padding-left : 25px ;
    background : transparent url('http://www.youdian.com/images/index/default/logbg_v2.png') -84px -70px no-repeat ;
}
div#login h2 input  {
    height : 18px ;
    width : 18px ;
    float : right ;
    border : none ;
    cursor : pointer ;
    margin : 2px 6px 0 0 ;
    background : transparent url('http://www.youdian.com/images/index/default/logbg_v2.png') 0 -169px no-repeat ;
}
div#login h2 a  {
    display : block ;
    float : left ;
    width : 83px ;
    height : 26px ;
    line-height : 26px ;
    text-align : center ;
    text-decoration : none ;
    color : #666 ;
}
div#login h2 a.cur  {
    color : #f00 ;
    background : transparent url('http://www.youdian.com/images/index/default/logbg_v2.png') 0 -287px no-repeat ;
}
div#login ul  {
    padding : 14px 0 18px 12px ;
    background : transparent url('http://www.youdian.com/images/index/default/logbg_v2.png') -184px bottom no-repeat ;
}
div#login ul li  {
    padding-left : 60px ;
    margin-top : 10px ;
    display : inline-block ;
}
div#login ul li  {
    display : block ;
}
div#login ul li:after  {
    content : "youdian" ;
    clear : both ;
    display : block ;
    height : 0 ;
    visibility : hidden ;
}
div#login ul li tt  {
    float : left ;
    width : 60px ;
    margin-left : -70px ;
    text-align : right ;
    line-height : 22px ;
    color : #444 ;
}
div#login ul li div input.cell, div#login ul li div input.cell2  {
    height : 16px ;
    padding : 2px ;
    line-height : 16px ;
    width : 179px ;
    border : 1px #dcdcdc solid ;
    color : #666 ;
}
div#login ul li div input.cell2  {
    width : 50px ;
}  
div#login ul li div label  {
    color : #666 ;
    cursor : pointer ;
}
div#login ul li div img  {
    margin-bottom : -7px ;
    margin-left : 8px ;
}
* html div#login ul li div img  {
    margin-bottom : -4px ;
}
*+html div#login ul li div img  {
    margin-bottom : -4px ;
}
div#login ul li div input#fnlogin  {
    width : 59px ;
    height : 21px ;
    cursor : pointer ;
    border : none ;
    margin-right : 15px ;
    background : transparent url('http://www.youdian.com/images/index/default/logbg_v2.png') 0 -148px no-repeat ;
}
div#login ul li p  {
    padding-top : 4px ;
    color : #f00 ;
}
</ style >
</ head >
< body >
< div  id ="body" >
     < input  id ="fnbtn"  type ="button"  title =""   />
</ div >
        
< div  id ="mask" ></ div >
< div  id ="login" >
< h2 >
         < input  id ="fnquit"  type ="button"  title ="退出登录"   />
         < a  href ="#"  class ="cur"  name ="Email" > Email登录 </ a >< a  href ="#"  name ="用户名" > 用户名登录 </ a >
     </ h2 >
     < ul >
         < form  id ="LoginForm"  name ="LoginForm"  action ="/Login.do"   method ="post"  enctype ="multipart/form-data"   >
         < li >
             < input  id ="loginType"  name ="loginType"  type ="hidden" />
             < tt >< label  id ="logtype"  for ="email" > Email: </ label ></ tt >
             < div >< input  id ="username"  name ="username"  type ="text"  class ="cell"  onKeyPress ="return checkSubmit(event)" /></ div >
           </ li >
         < li >
             < tt >< label  for ="password" > 密　码: </ label ></ tt >
             < div >< input  id ="password"  name ="password"  type ="password"  class ="cell"  onKeyPress ="return checkSubmit(event)"   /></ div >
              </ li >
         < li >
             < tt ></ tt >
             < div >< input  id ="reme"  name ="rememberme"  type ="checkbox"   /> 　 < label  for ="reme" > 下次自动登录 </ label >
             </ div >
         </ li >
         < li >
             < tt ></ tt >
             < div >< input  id ="fnlogin"  type ="button" />< a  href ="#"  onclick ="return checkForgetPassword()" > 忘记密码? </ a ></ div >
         </ li >
         </ form >
     </ ul >
</ div >
< script  type ="text/javascript" >
function  g(obj) {
     return  document.getElementById(obj);
}
var  login  =  {
    title: null ,
    show: function (){
         var  sWidth,sHeight;
        sWidth  =  screen.width;
        sWidth  =  document.body.offsetWidth;
        sHeight = document.body.offsetHeight;
         if  (sHeight < screen.height){sHeight = screen.height;}
        g( " mask " ).style.width  =  sWidth  +   " px " ;
        g( " mask " ).style.height  =  sHeight  +   " px " ;
        g( " mask " ).style.display  =   " block " ;
        g( " login " ).style.display  =   " block " ;
        g( " login " ).style.right  =  g( " body " ).offsetLeft  +   " px " ;
        
//         window.status = g("body").offsetLeft;
    },
    hide: function (){
        g( " mask " ).style.display  =   " none " ;
        g( " login " ).style.display  =   " none " ;
    }
}
g( " fnbtn " ).onclick  =   function (){
    login.show();
     this .blur();
     this .style.backgroundPosition  =   " 0 -109px " ;
};
g( " fnlogin " ).onclick  =   function () {
     //  The following 5 lines of code is used to get the login type & pass to the form
     //  One More line of code is insert to root_index.jsp to capture the hidden value
     if  (document.getElementById( " logtype " ).innerHTML  ==   " Email: " ) {
        document.getElementById( ' loginType ' ).value  =   ' email ' ;
    }  else  {
        document.getElementById( ' loginType ' ).value  =   ' mobile ' ;   
    }
    document.LoginForm.submit();
};
g( " fnquit " ).onclick  =   function (){login.hide();g( " fnbtn " ).style.backgroundPosition  =   " 0 -70px " ;};
var  aa  =  g( " login " ).getElementsByTagName( " a " );
var  aTab  =   new  Array();
for ( var  i = 0 ; i < aa.length; i ++ ){
     if (aa[i].parentNode.nodeName  ==   " H2 " ){
        aTab.push(aa[i]);
    }
}
for ( var  j = 0 ; j < aTab.length; j ++ ){
    aTab[j].onclick  =   function (){
         this .blur();
         if  ( this .className  !=   " cur " ){
             for ( var  k = 0 ; k < aTab.length; k ++ ){aTab[k].className  =   "" };
             this .className  =   " cur "
            g( " logtype " ).innerHTML  =   this .name  +   " : " ;
        }
    }
}
</ script >
< script  language ="javascript" >
login.hide();
</ script >
</ body >
</ html >

转载于:https://www.cnblogs.com/rex061403116/articles/1113718.html