javascript - 模糊和取消模糊我的 html 上的元素

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() 即可正常工作。