背景下出现的引导模式

javascript css twitter-bootstrap modal-dialog

2022-08-29 22:35:24

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

下面是它的外观：

modal hiding behind backdrop

请参阅此小提琴，了解重现此问题的一种方法。该代码的基本结构如下所示：

<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;
}

任何想法为什么这是或我可以做些什么来解决这个问题？

答案 1

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

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

以下是执行此操作的几种方法：

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

答案 2

问题与父容器的定位有关。在显示模式之前，您可以轻松地将其从这些容器中“移出”。如果您使用 js 进行模态，下面是执行此操作的方法：show

$('#myModal').appendTo("body").modal('show');

或者，如果您使用按钮启动模式，请放下并执行：.modal('show');

$('#myModal').appendTo("body")

这将保留所有正常功能，允许您使用按钮显示模式。