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-backdrop {
    position: relative;
    /* ... */
}

2015-03-19 02:38:57

其他回答

和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

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

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

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

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

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

2013-04-03 07:00:32

$('.modal').insertAfter($('body'));

2016-01-03 23:43:12

我尝试了上面提供的所有选项，但没有得到它的工作使用这些。

什么是有效的:设置。modal- background的z-index为-1。

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

2014-11-14 01:07:16

Bootstrap模态出现在背景下

推荐文章

最新文章

标签