сделать фон размытым и отключить фон

Question

Я пытаюсь реализовать Ajax Loader. Когда он загружается, он делает фон размытым, что хорошо, но фоновое содержимое по-прежнему активно. Я хочу, чтобы фон был отключен при загрузке загрузчика.

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> 

любой удачи?

Answer 1

Вы можете создать DIV, что сделать это ....

.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>