猿问

请问自举模态出现在背景下

自举模态出现在背景下

我在引导示例中直接为我的模式使用了代码，并且只包含了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;}

知道为什么会这样，或者我能做些什么来解决这个问题吗？



www说
浏览 361回答 3
3回答

慕桂英3389331

如果模态容器具有固定或相对位置，或者位于具有固定或相对位置的元素中，则会发生此行为。确保模态容器及其所有父元素都以默认方式定位，以解决问题。这里有几种方法可以做到这一点：最简单的方法就是移动模态div，所以它在任何元素之外都有特殊的定位。一个好地方可能就在关闭体标签之前。</body>.或者，您可以删除position:CSS属性从模式及其祖先直到问题消失。然而，这可能会改变页面的外观和功能。
0

慕勒3428872

这个问题与父容器的位置有关。您可以很容易地“移动”您的模式从这些容器，然后显示它。如果你是show使用js的模式：$('#myModal').appendTo("body").modal('show');或者，如果使用按钮启动模式，则删除.modal('show');就这么做：$('#myModal').appendTo("body")这将保持所有正常的功能，允许您使用按钮显示模态。
0

喵喵时光机

我尝试了上面提供的所有选项，但没有让它使用这些选项。什么起作用了：将.mod背景的z索引设置为-1。.modal-backdrop&nbsp;{ &nbsp;&nbsp;z-index:&nbsp;-1;}
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答