遮罩窗体弹出登录页面代码实现

先上效果图(本人喜欢胡巴，背景用了胡巴)，鼠标滑过页面，图片变暗，透明度为0.4，同时弹出登录窗口。

接下来先看css代码(写的可能不是很规范，根据调整样式顺序写的)

 body{background-color: black;width: 100%;height: auto;overflow: hidden;}
    img{width: 1550px;height: auto;}
    .logIn{width:340px;height:280px;background-color: white;border-radius: 10px;border: 1px solid grey;}
    .login-title{margin: 0 auto;width: 100%;height:45px;background-color: #80236b; }
    h3{line-height: 45px;text-align: center;}
    .login-content{margin:30px 0 0 0;}
    .login-content div{width:200px;margin:0 auto;padding-bottom:25px;}
    .affix{top:200px;right: 200px;}
    label{width: 100%;line-height: 40px;}
    .button{margin: -10px 0 0 80px;width:180px;}
    input.log{width:180px;margin: 0 auto;color: white;background-color: #80236b;border-radius: 15px;height: 40px;font: 16px "microsoft yahei";}
    p.remember-name{font: 14px "microsoft yahei";color: dimgrey;}
    input{border-radius: 5px;font: 14px "microsoft yahei";}
    /*placeholder样式*/
    ::-webkit-input-placeholder {font: 14px "microsoft yahei";color:grey;padding-left: 10px;line-height: 22px;}
    ::-moz-placeholder { font: 14px "microsoft yahei";color:grey;padding-left: 10px;line-height: 22px;} /* firefox 19+ */
    :-ms-input-placeholder {font: 14px "microsoft yahei";color:grey;padding-left:10px;line-height: 22px;} /* ie */
    input:-moz-placeholder {font: 14px "microsoft yahei";color:grey;padding-left:10px;line-height: 22px;}
    .glyphicon{color:#80236b; }

html代码（代码简单）

<body>
<img src="dist/images/link.jpg" alt="遮罩图片" style="z-index: -1"/>
       
    <div class="logIn affix" style="display: none;z-index:1000">
        <div class="login-title">
            <h3>用户登录</h3>
        </div>
        <div class="login-content">
            <div class="user">
                <label class="user glyphicon glyphicon-user"></label>
                <input type="text" placeholder="员工账号" />
            </div>
            <div class="pass">
                <lable class="password glyphicon glyphicon-lock"> </lable>
                <input type="password" placeholder="密码" />
            </div>
        </div>
        <div class="button">
            <p class="remember-name"> <input class="remember-name" type="radio" value="记住账号和密码" name="remember"/>记住账号和密码</p>
            <input class="log" type="button" value="登录"/>
        </div>
    </div>
</body>

jquery代码

//遮罩窗体弹出登录框
            $(function(){
                $('body').hover( function(event){
                    $('img').fadeTo(1000,0.4);//1000为速度，0.4为透明度
                    $('.logIn').show(1000);
                });
            });

　　本人做这个练习就是想联系一下自己写jquery代码，有问题之处还请多多指正！