Blur and unblur the elements on my html

问题

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:

<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

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?

And how do we unblurred it after the user login?

回答1:

Just set the position of the login form to position:absolute and the rest would align just fine.

here is the updated fiddle.

Update

To remove the blur effect after login, just use the following jQuery code.

$('.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

The click event on the submit button fires a form submit. just add e.preventDefault() in the code and it works fine.

回答2:

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.

来源：https://stackoverflow.com/questions/32067798/blur-and-unblur-the-elements-on-my-html

标签

javascript

jquery

html

css