Question

我正在为我网站的某个部分构建模态效果，但我遇到了一个问题：我想仅在我的背景图像上制作模糊效果，但我想要将所有其他元素保持整洁。它实际上不是一个模态对话框，我只是想在背景图像（div）上添加模糊效果，但我想保留一个包含背景图像的另一个div（父）内的div。我不能对我想要从效果中排除的div（它只包含文本）使用绝对或固定位置，因为这样我必须更改所有布局，所以我试图将它从模糊效果。最重要的是，我正在尝试用css实现这个结果，所以我使用jquery切换到css类。但我对jquery的所有事情都持开放态度。这是我的代码：

<div class="container-fluid effect">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar" id="page-wrap">
                <ul class="nav nav-sidebar">
                    <li></li>
<li></li>
<li></li>
<li></li>
                </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <div id="modal">
                    <h1>Heart Healthy</h1>
                    <p>Pulses are a good source of potassium, calcium, zinc, niacin and vitamin K, and are particularly rich in folate, which helps the heart by bringing down the homocysteine levels, a serious risk factor for heart disease. An excellent source of virtually fat-free protein, chickpeas and lentils are rich in soluble fiber, which has been shown to help lower total cholesterol and LDL ("bad") cholesterol levels while also improving the body's ability to utilize insulin. They are also rich in potassium, calcium and magnesium—a mineral combination associated with a reduced risk of heart disease.</p>
                </div>
            </div>
        </div>

javascript：

$("li").on("click", function() {
            $(".col-md-offset-2.main").toggleClass("dialogIsOpen");
            $("#modal").toggleClass("modalEffect");
        });

最后是css：

#modal {
    position: relative;
    float: left;
    background: #8dc63f;
    color: white;
    width: 50%;
    left: 22%;
    top: 16%;
    opacity: 0;
    padding: 3%;
    text-align: center;
}
.dialogIsOpen {
    -webkit-filter: blur(5px) grayscale(50%);
    -webkit-transform: scale(0.9);
}
.modalEffect {
    opacity: 1!important;
    pointer-events: auto!important;
}
.col-md-offset-2.main, #modal {
    transition: all 0.4s ease;
}
.col-sm-9.col-sm-offset-3.col-md-10.col-md-offset-2.main {
    background-image: url(images/effect-image.jpg);
    margin-left: 0;
    height: 456px;
    width: 94.333333%;
}

从jquery模糊效果中排除div

0 个答案: