Bootstrap 模态出现在背景下

小编典典

Bootstrap 模态出现在背景下

all

我直接从 Bootstrap 示例中使用了我的模态代码，并且只包含了 bootstrap.js（而不是 bootstrap-
modal.js）。但是，我的模态出现在灰色渐变（背景）下方并且不可编辑。

这是它的样子：

模态隐藏在背景后面

有关重现此问题的 一种方法，请参 见此小提琴。该代码的基本结构如下： __

<body>
    <p>Lorem ipsum dolor sit amet.</p>

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>



body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

任何想法为什么会这样或我能做些什么来解决这个问题？

阅读 104

2022-03-04

共1个答案

小编典典

如果模态容器具有固定或相对位置，或者位于具有固定或相对位置的元素内，则会发生此行为。

确保模态容器及其所有父元素都以解决问题的默认方式定位。

这里有几种方法可以做到这一点：

最简单的方法是移动模态 div，使其位于任何具有特殊定位的元素之外。一个好地方可能就在结束 body 标记之前</body>。
或者，您可以position:从模式及其祖先中删除 CSS 属性，直到问题消失。但是，这可能会改变页面的外观和功能。

2022-03-04