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 { z - index: 0; ｝

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

2017-07-11 21:53:15

其他回答

我让它通过在打开模态窗口后给它一个高z指数值来工作。例如:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

2012-12-12 07:24:39

嗨，我有同样的问题，然后我意识到，当你使用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

我简单地设置了:

#myModal {
    z-index: 1500;
}

它工作....

对于原来的问题:

.my-module {
    z-index: 1500;
}

2015-02-12 16:02:29

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

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

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

2014-11-14 01:07:16

对于那些像我这样不使用插件或主题就添加Bootstrap到Wordpress的人:

我在function.php文件中添加了引导CSS和JS。然后，在wordpress页面中调用modal。无论我做什么，.modal- background始终在#mymodal前面。我发现这是一个z-索引问题，但是，由于#mymodal是在<body>结尾的内容div和.modal- background中生成的，z-index不能工作。我所做的就是在生成后将#mymodal移到as的末尾:

$(document).ready(function () {
   $('#mymodal').on('shown.bs.modal', function () {
       $('#mymodal').appendTo(document.body);
     })
});

顺便说一下，我必须在$(document)中添加show .bs.modal。ready，因为当我按下按钮时，它并没有被调用。

2020-06-05 00:48:12

Bootstrap模态出现在背景下

推荐文章

最新文章

标签