模糊和取消模糊的元素在我的html

Blur and unblur the elements on my html

本文关键字：模糊 我的 html 取消 元素      更新时间：2023-09-26

我想做的是创建一个在实际网页前面的登录页面。通过网上的研究，我发现我可以在用户登录之前将实际的网页模糊化。下面是代码:

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在页面的中间?

在用户登录后我们如何消除模糊呢?

只要将login的位置设置为position:absolute，其余的就可以对齐了。

这里是更新后的小提琴

要删除登录后的模糊效果，只需使用以下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

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

如果你想模糊/取消模糊，只需创建一个类。

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

把它切换到#main

相关文章：