Question

我正在尝试为Bootstrap 4模式添加模糊的背景。

我的想法是，将网站上的所有内容都放在一个容器中（导航栏，内容和页脚），然后在设置body.modal-open时将其添加到filter:blur(4px)中。

不幸的是，这似乎不适用于固定的导航栏-当您滚动到页面的一半并打开模式时，导航栏就会消失。

任何人都可以解释为什么/知道如何解决此问题？

HTML：

<div id="content-container">
    <nav class="navbar fixed-top">
        <!--some nav elements -->
    </nav>
    <main>
        <!-- content goes here -->
    </main>
    <footer>
        <!-- some footer -->
    </footer>
<div>
<div id="modal-container">
    <!-- Modals go here -->
<div>

CSS：

body.modal-open #content-container{
    filter: blur(4px);
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
}

codepen上的样本： https://codepen.io/danmoreng/pen/WVpzOm

Answer 1

我已根据要求进行了一些更改，请检查。

Blur body on modal

修复了添加滤镜模糊时导航栏消失的问题

1 个答案: