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').insertAfter($('body'));

2016-01-03 23:43:12

在你的导航栏navbar-fixed-top需要z-index = 1041 如果你使用bootstarp-combined.min.css，也需要将。navbar-fixed-top， .navbar-fixed-bottom z-index改为1041

2013-11-08 10:57:29

上述建议的解决方案都不适合我，但这个技巧解决了问题:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

2015-09-05 11:40:36

我也有同样的问题，也检查了Muhd的答案。

但是，我的模态需要左，顶部属性，所以只要把固定位置改为绝对，它就工作了。

.modal {
    position: absolute;
}

2016-03-03 10:40:28

只需添加两行CSS:

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

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

2016-05-28 21:51:34

Bootstrap模态出现在背景下

推荐文章

最新文章

标签