登录框弹出

实现效果

点击页面导航栏的登录按钮,弹出登录框(div),同时背景变暗(一个设置不透明度的div)
})

html

//登录框

   

       

           

               
               
           
           

               

                   
                   
               
               

                   
                   

                       
                       
                       

                           
                           |  发送验证码
                       
                       
                       

                           立即注册
                           忘记密码?
                       
                       
——其他方式登录——
                       
                   
                   
                   

                       
手机扫码，安全登录
                       
                       
 请用APP扫码登录
                       密码登录
                   
               
           
       
   

//遮盖层

CSS

//z-index 只对设置了position的属性起作用
.theme-popover-mask{
z-index: 10001;
position:fixed;
top:0;left:0;width:100%;height:100%;
background:#000;
opacity:0.4;//规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
filter:alpha(opacity=40);/* 针对 IE8 以及更早的版本 */
display:none
}
.theme-popover{z-index:10002;position:fixed;top:45%;left:50%;width:790px;height:420px;margin:-200px 0 0 -395px;display:none;}

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

jQuery

//登录注册弹出层
    $('.lword input').eq(0).click(function(){//登录按钮
        $('.theme-popover-mask').fadeIn(100);
        $('.theme-popover').slideDown(200);
    })
    //登录框关闭按钮   
    $('.closed').click(function(){
        $('.theme-popover-mask').fadeOut(100);
        $('.theme-popover').slideUp(200);