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

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

当前回答

我通过添加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 {
    background-color: #000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 0 !important;
}

2014-11-25 10:40:05

在附加到主体时要小心!

这肯定会从背景后面得到那个模态:

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

然而，这将在每次打开主体时添加另一个模态，这可能会导致在更新面板中添加具有编辑和更新的网格视图等控件到模态时头痛。因此，你可以考虑在模式关闭时删除它:

例如:

$(document).on('hidden.bs.modal', function () {
        $('.modal').remove();
    });

将删除添加的模态。(当然，这是一个例子，你可能想要使用另一个你添加到模态的类名)。

正如其他人已经说过的;你可以简单地从模式中关闭back-drop (data- background ="false")，或者如果你不能没有屏幕变暗，你可以调整.modal- backstage CSS类(或者增加z-index)。

2016-10-05 16:24:31

嗨，我有同样的问题，然后我意识到，当你使用bootstrap 3.1 不同于旧版本的bootstrap (2.3.2) 模态的HTML结构被改变了!

你必须用模态对话框和模态内容来包装你的模态页眉、页脚

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>

2014-02-12 08:22:27

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

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

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

2017-07-11 21:53:15

只需添加两行CSS:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

modal- background应该有1050的值来设置它在导航栏上。

2016-05-28 21:51:34

Bootstrap模态出现在背景下

推荐文章

最新文章

标签