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

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

遮罩窗体弹出登录页面代码实现_第1张图片

接下来先看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代码,有问题之处还请多多指正!

你可能感兴趣的:(遮罩窗体弹出登录页面代码实现)