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

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

当前回答

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

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

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

2016-02-08 16:58:08

其他回答

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

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

2015-05-06 01:45:51

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

.modal-open {
    overflow: visible;
}

2013-08-09 23:19:53

在CSS中添加这些对我来说是一种技巧。

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

2022-12-27 15:48:38

添加到你的样式表:

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

2014-11-25 10:40:05

这个问题与父容器的定位有关。你可以很容易地将你的模式从这些容器中“移动”出来，然后再显示出来。下面是如何做到这一点，如果你显示你的模式使用js:

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

或者，如果你使用按钮启动模式，删除.modal('show');只要这样做:

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

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

2013-04-03 07:00:32

Bootstrap模态出现在背景下

推荐文章

最新文章

标签