登录框弹出

实现效果

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

html

//登录框
<div class="theme-popover">
   <form name="" action="" method="">
       <div class="login">
           <div class="lpicture">
               <img src="__PUBLIC__/images/lbanner.png">
               <img class="closed" src="__PUBLIC__/images/close.png">
           </div>
           <div class="rpassword">
               <div class="lpic">
                   <img class="unnow" src="__PUBLIC__/images/lpc.png">
                   <img src="__PUBLIC__/images/lcode.png">
               </div>
               <div class="lway">
                   <!--输入密码登录-->
                   <div class="lpc">
                       <img src="__PUBLIC__/images/llogo.png">
                       <input type="text" placeholder="手机号" id="mobile">
                       <div class="input">
                           <input type="text" placeholder="验证码" id="code">
                           <span><label>|</label>&nbsp;&nbsp;发送验证码</span>
                       </div>
                       <input type="button" value="登录" onclick="login()">
                       <div class="zf">
                           <a href="{:url('/user/Register/reg')}" ><span class="zc">立即注册</span></a>
                           <a href="{:url('/user/Register/reg/action/forget')}" ><span class="fm">忘记密码?</span></a>
                       </div>
                       <p class="else">——其他方式登录——</p>
                       <a href="{:url('/user/Login/wxLogin')}" ><i class="fa fa-weixin" aria-hidden="true"></i></a>
                   </div>
                   <!--二维码登录-->
                   <div class="lcode">
                       <p>手机扫码，安全登录</p>
                       <img src="__PUBLIC__/images/code.jpg">
                       <p class="sys"><i class="fa fa-mobile" aria-hidden="true"></i>&nbsp;请用APP扫码登录</p>
                       <a href="javascritp:void(0);">密码登录</a>
                   </div>
               </div>
           </div>
       </div>
   </form>
</div>
//遮盖层
<div class="theme-popover-mask"></div>

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);