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

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

当前回答

这招对我很管用:

sass: 
  .modal-backdrop
    display: none
  #yourModal.modal.fade.in
    background: rgba(0, 0, 0, 0.5)

2017-10-01 07:57:35

其他回答

将这个添加到页面中。这对我很管用。

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>

2016-07-23 12:50:24

有

transform:translate3d(0, 0, 0);

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

2021-02-05 12:41:43

你可以做一个变通，但这将从所有页面删除淡出。模态会像Facebook弹出窗口一样弹出。打开模态尝试后:

 $('.modal-backdrop').removeClass('modal-backdrop');

2014-06-19 07:07:51

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

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

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

2014-11-14 01:07:16

你也可以从.modal- background中删除z索引。生成的css看起来像这样。

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }

2015-05-05 20:38:23

Bootstrap模态出现在背景下

推荐文章

最新文章

标签