使背景模糊并禁用背景

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>