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-index .modal设置为最高值

例如, .sidebarwrapper的z-index为1100，因此将.modal的z-index设置为1101

.modal {
    z-index: 1101;
}

2016-03-03 06:42:38

其他回答

我通过添加data- background ="false"到div来解决我的问题:

<div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

.....

2020-05-21 04:55:43

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

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

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

2017-07-11 21:53:15

另一种方法是从bootstrap.css中的.modal- background中删除z-index。这将导致背景与身体的其他部分在同一水平线上(它仍然会褪色)，你的模态在顶部。

.modal- background是这样的

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

2014-11-26 01:41:21

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

.modal-open {
    overflow: visible;
}

2013-08-09 23:19:53

我发现:

在bootstrap 3.3.0中这是不正确的，但在bootstrap 3.3.5中这是正确的。让我们看看代码。 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

2015-11-23 09:54:06

Bootstrap模态出现在背景下

推荐文章

最新文章

标签