CODEWITHSUNDEEP
jqueryhtmlcss
Mubin
Mubin

Reputation: 4425

make background blurry and disable background

I'm trying to implement Ajax Loader. When it loads, it makes background blurred which is fine but background contents are still active. I want background to be disabled when loader appears.

CSS

.container{
        /* overflow: hidden; */
    -webkit-filter: blur(13px);
    -moz-filter: blur(13px);
    -o-filter: blur(13px);
    -ms-filter: blur(13px);
    filter: blur(13px);
}
#spinner
{
    /* display: none; */
    width:100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    background:url(../loading.gif) no-repeat center transparent;
    text-align:center;
    padding:10px;
    margin-left: -50px;
    margin-top: -50px;
    z-index:2;
    overflow: auto;
}

HTML

<div id="spinner"></div>
<div class="container">
    <!-- Some buttons and links are here, I want these disabled(container gone blurred but links and buttons are still active)-->
</div>

any luck?

Upvotes: 2

Views: 4640

Answers (1)

giordanolima
giordanolima

Reputation: 1218

You can create a div that do this....

.container{
        /* overflow: hidden; */
    -webkit-filter: blur(13px);
    -moz-filter: blur(13px);
    -o-filter: blur(13px);
    -ms-filter: blur(13px);
    filter: blur(13px);
}
#spinner
{
    /* display: none;    */
    width: 100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    background: url(../loading.gif) no-repeat center transparent;
    text-align: center;
    padding:10px;
    margin-left: -50px;
    margin-top: -50px;
    z-index:3;
    overflow: auto;
}
#pano{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    z-index: 2;
}
<div id="spinner"></div>
<div id="pano"></div> <!-- THIS IS THE TRICK -->
<div class="container">
    <a href="#">Your content goes here.... Try click here</a><br/>
    <a href="#">Your content goes here.... Try click here</a><br/>
    <a href="#">Your content goes here.... Try click here</a><br/>
    <a href="#">Your content goes here.... Try click here</a><br/>
    <a href="#">Your content goes here.... Try click here</a><br/>
    <a href="#">Your content goes here.... Try click here</a><br/>
    <a href="#">Your content goes here.... Try click here</a><br/>
    <a href="#">Your content goes here.... Try click here</a><br/>
</div>

Upvotes: 5

Related Questions