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

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

当前回答

我在Iphone和Ipad上使用Sharepoint 2013时遇到了类似的问题模态引导保持z索引问题与背景。

我只是在JS上使用这个:

$ (' # myModal ')。(“shown.bs。Modal '， function() { //要关联z-index，确保背景和模态是兄弟 (这).before美元($ (' .modal-backdrop ')); //现在设置modal的z-index大于background (美元). css(“z - index方法($ (' .modal-backdrop ') . css (z - index)) + 1); })；

2017-06-08 13:20:36

其他回答

.modal-backdrop {
/* bug fix - no overlay */    
display: none;}

2020-06-07 19:23:14

我发现通过添加内联样式标签来设置“display: none”可以防止这个问题。代码的位置没有任何影响。

2013-09-30 16:52:46

对于那些像我这样不使用插件或主题就添加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

我有这个问题，最简单的解决方法是在modal-dialog div上添加z-index大于1040:

<div class="modal-dialog" style="z-index: 1100;">

我相信bootstrap创建了一个div模态背景淡出，在我的情况下，z指数为1040，所以如果你把模态对话框放在上面，它应该不再是灰色的。

2016-02-08 16:58:08

另外，确保BootStrap的css和js版本是相同的。不同版本也可以使模态出现在背景下:

例如:

Bad:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

好:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

2014-11-14 10:18:26

Bootstrap模态出现在背景下

推荐文章

最新文章

标签