Question

我要做的是创建一个登录实际网页前面的登录页面。通过在线研究，我发现在用户登录之前我可以使实际网页模糊不清。以下是编码：

HTML：

<div id="login">
        <form class="form-signin">
            <span id="reauth-email"><h2>Login</h2></span>
            <input type="email" id="inputEmail" placeholder="Email address">
            <input type="password" id="inputPassword" placeholder="Password">
            <div id="remember" class="checkbox">
            </div>
            <button class="btn btn-lg btn-primary btn-block btn-signin" id="btn_login" type="submit">Sign in</button>
        </form>    
</div>
<div id="main">
    <div id="div1">12345</div>
    <div id="div2">67890</div>
    <div id="div3">abcde</div>
</div>

的CSS：

#div1{height:30px; width:400px;background-color:red}
#div2{height:300px; width:400px; background-color:yellow}
#div3{height:30px; width:400px; background-color:green}
#main
{-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
width: 100px;
height: 100px;
background-color: #ccc;}
#login{position:relative; top:180px; left:70px; width:35%; background-color: white; border:2px solid black; padding:0px 20px 20px 20px; border-radius: 10px; z-index: 1000;}

JSFIDDLE

我想知道的是，在我将“登录”div放在页面中间后，为什么我的“主”div不会到达页面顶部（它在顶部留下一个空白区域）？

用户登录后我们如何不模糊？

Answer 1

只需将login表单的位置设置为position:absolute，其余表单就可以了。

here is the updated fiddle.

<强>更新

要在登录后删除模糊效果，只需使用以下jQuery代码。

$('.btn-signin').click(function(e){
    e.preventDefault();
    $('#login').hide();
    $('#main').css({
        '-webkit-filter':'none',
        '-moz-filter':'none',
        '-o-filter':'none',
        '-ms-filter':'none',
        'filter':'none',
    })
})

更新2

提交按钮上的点击事件会触发表单提交。只需在代码中添加e.preventDefault()，它就可以正常工作。

Answer 2

如果你想模糊/ unblur只是创建一个类。

.blured{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}

只需在#main上切换。

在我的HTML上模糊和解开元素

2 个答案: