Bootstrap模态出现在背景下

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

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

当前回答

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

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

2018-12-20 09:53:23

其他回答

我有这个问题，最简单的解决方法是在modal-dialog div上添加z-index大于1040:

<div class="modal-dialog" style="z-index: 1100;">

我相信bootstrap创建了一个div模态背景淡出，在我的情况下，z指数为1040，所以如果你把模态对话框放在上面，它应该不再是灰色的。

2016-02-08 16:58:08

我简单地设置了:

#myModal {
    z-index: 1500;
}

它工作....

对于原来的问题:

.my-module {
    z-index: 1500;
}

2015-02-12 16:02:29

我让它通过在打开模态窗口后给它一个高z指数值来工作。例如:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

2012-12-12 07:24:39

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

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

.modal {
    position: absolute;
}

2016-03-03 10:40:28

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

.modal-open {
    overflow: visible;
}

2013-08-09 23:19:53

Bootstrap模态出现在背景下

推荐文章

最新文章

标签