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

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

当前回答

我发现:

在bootstrap 3.3.0中这是不正确的，但在bootstrap 3.3.5中这是正确的。让我们看看代码。 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

2015-11-23 09:54:06

其他回答

在你的导航栏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

我在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

在附加到主体时要小心!

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

$('#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

如果模态容器具有固定或相对位置，或者位于具有固定或相对位置的元素中，则会发生这种行为。

确保模态容器及其所有父元素都以默认方式定位以解决问题。

这里有一些方法:

最简单的方法是移动modal div，使其位于任何具有特殊定位的元素之外。一个好地方可能就在body结束标签</body>之前。或者，您可以从模态及其祖先中删除position: CSS属性，直到问题消失。然而，这可能会改变页面的外观和功能。

2012-08-03 03:09:40

但是迟了，这里有一个通用的解决方案

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

访问这个链接-当使用固定的侧边栏时，引导3模式在背景下消失。

2014-01-15 01:15:37

Bootstrap模态出现在背景下

推荐文章

最新文章

标签