javascript 模糊和取消模糊我的 html 上的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32067798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blur and unblur the elements on my html
提问by Coolguy
what I'm trying to do is to create a login page which goes in front of the actual webpage. From research online, I found out that I can make the actual webpage blurred before the user login. Below is the coding:
我想要做的是创建一个登录页面，它位于实际网页的前面。从网上研究，我发现我可以在用户登录之前使实际网页变得模糊。下面是编码：
html:
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:
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;}
What I want to know is, how come my "main" div will not go up to the top of the page (it left a white space on top) after I placed the "login" div on the middle of the page?
我想知道的是，在我将“登录”div 放在页面中间后，为什么我的“主”div 不会上升到页面顶部（它在顶部留下了空白）？
And how do we unblurred it after the user login?
我们如何在用户登录后对其进行模糊处理？
采纳答案by Imesh Chandrasiri
Just set the position of the loginform to position:absoluteand the rest would align just fine.
只需将login表单的位置设置为position:absolute，其余部分就可以很好地对齐。
Update
更新
To remove the blur effect after login, just use the following jQuery code.
要去除登录后的模糊效果，只需使用以下 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',
})
})
Update 2
更新 2
The click event on the submit button fires a form submit. just add e.preventDefault()in the code and it works fine.
提交按钮上的点击事件触发表单提交。只需添加e.preventDefault()代码，它就可以正常工作。
回答by Sko
If you want to blur/unblur just create a class.
如果您想模糊/取消模糊，只需创建一个类。
.blured{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
And just toggle it on #main.
只需打开它#main。
