我已经直接从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;
}

你知道为什么会这样吗或者我能做些什么来弥补吗?


当前回答

在我的情况下,解决方案是简单的,我忘记在div上添加id“my-modal”的“modal”类,由$('#my-modal').modal('show')提升;

因为div的内容包含了所有需要的内容,所以除了上面的覆盖之外,屏幕上的结果几乎是完美的。

我敢打赌,其他与z-index技巧或其他css技巧无关的父div或未关闭div的位置的答案也可能是在这种情况下。

其他回答

在我的情况下解决它,在我的样式表中添加这个:

.modal-backdrop { z - index: 0; }

带谷歌调试器,可以检查元素背景和修改属性。google的运气。

如果模态容器具有固定或相对位置,或者位于具有固定或相对位置的元素中,则会发生这种行为。

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

这里有一些方法:

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

尝试将类.modal-open overflow值从隐藏重写为可见:

.modal-open {
    overflow: visible;
}
$('.modal').insertAfter($('body'));

对我来说,最简单的解决方案是把我的模态放在一个绝对位置和z索引高于.modal- background的包装器中。因为模态背景(至少在我的情况下)的z指数为1050:

.my-modal-wrapper { 位置:绝对的; z - index: 1060; } < div class = " my-modal-wrapper " > < / div >