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

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


当前回答

我在Iphone和Ipad上使用Sharepoint 2013时遇到了类似的问题 模态引导保持z索引问题与背景。

我只是在JS上使用这个:

$ (' # myModal ')。(“shown.bs。Modal ', function() { //要关联z-index,确保背景和模态是兄弟 (这).before美元($ (' .modal-backdrop ')); //现在设置modal的z-index大于background (美元). css(“z - index方法($ (' .modal-backdrop ') . css (z - index)) + 1); });

其他回答

和Davide Lorigliola一样,我通过提高z指数来解决这个问题:

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

添加到你的样式表:

.modal-backdrop {
    background-color: #000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 0 !important;
}

我也有同样的问题,也检查了Muhd的答案。

但是,我的模态需要左,顶部属性,所以只要把固定位置改为绝对,它就工作了。

.modal {
    position: absolute;
}

transform:translate3d(0, 0, 0);

在任何祖先元素上也会导致这种情况。在bootstrap 4.6.0上测试。

对于那些像我这样不使用插件或主题就添加Bootstrap到Wordpress的人:

我在function.php文件中添加了引导CSS和JS。 然后,在wordpress页面中调用modal。 无论我做什么,.modal- background始终在#mymodal前面。我发现这是一个z-索引问题,但是,由于#mymodal是在<body>结尾的内容div和.modal- background中生成的,z-index不能工作。 我所做的就是在生成后将#mymodal移到as的末尾:

$(document).ready(function () {
   $('#mymodal').on('shown.bs.modal', function () {
       $('#mymodal').appendTo(document.body);
     })
});

顺便说一下,我必须在$(document)中添加show .bs.modal。ready,因为当我按下按钮时,它并没有被调用。