Bootstrap 模态出现在背景下

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

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

这里有几种方法可以做到这一点：

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

问题与父容器的定位有关。在显示之前，您可以轻松地将模态从这些容器中“移出”。如果您show使用 js 编写模态框，请执行以下操作：

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

或者，如果您使用按钮启动模式，请删除 .modal('show'); 并执行以下操作：

$('#myModal').appendTo("body") 

这将保留所有正常功能，允许您使用按钮显示模式。

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

起作用的是：将 .modal-backdrop 的 z-index 设置为 -1。

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

另外，请确保 BootStrap css 和 js 的版本相同。不同的版本也可以让modal出现在背景下：

例如：

坏的：

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

我也遇到了这个问题，在我发现我实际上不需要背景之前，没有一个解决方案对我有用。您可以使用以下代码轻松删除背景。

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

注意：data-backdrop 属性需要设置为 false（other options：static 或 true）。

我通过在打开模式窗口后为模式窗口提供高 z-index 值来使其工作。例如：

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

@Muhd 提供的解决方案是最好的方法。但是，如果您遇到无法更改页面结构的情况，请使用以下技巧：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

这里的技巧是 data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);"，通过删除默认背景并通过设置对话框本身的背景颜色和一些 alpha 创建一个虚拟背景。

更新 1：正如@Gustyn 指出的那样，单击背景不会按预期关闭对话框。因此，要实现这一点，您必须添加一些 java 脚本代码。这是一些如何实现这一目标的示例。

$('.modal').click(function(event){
    $(event.target).modal('hide');
});

我发现的适用于所有我的案例的最简单的解决方案是答案in a similar post：

这里是：

.modal {
  background: rgba(0, 0, 0, 0.5); 
}
.modal-backdrop {
  display: none;
}

基本上不使用原始背景。相反，您使用模态作为背景。结果是它的外观和行为与原来的完全一样。它避免了 z-indexes 的所有问题（对我来说，将 z-index 更改为 0 解决了这个问题，但是我的导航菜单在模态和背景之间产生了一个新问题）并且很简单。

感谢@Jevin O. Sewaruth 发布原始答案。

这将涵盖所有模式，而不会弄乱任何动画或预期的行为..

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});

一个但晚了，但这是一个通用的解决方案 -

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

访问此链接 - Bootstrap 3 - modal disappearing below backdrop when using a fixed sidebar 了解详细信息。

解决此问题的另一种方法是从 bootstrap.css 中的 .modal-backdrop 中删除 z-index。这将导致背景与您身体的其他部分处于同一水平（它仍然会褪色）并且您的模态位于顶部。

.modal-backdrop 看起来像这样

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

只需添加两行 CSS：

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

.modal-backdrop 应该有 1050 值以将其设置在导航栏上。

我只是设置：

#myModal {
    z-index: 1500;
}

它有效....

对于原始问题：

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

在您的模态中使用它：

data-backdrop="false" 

当在 CSS 中使用渐变之类的东西来处理背景甚至手风琴标题时，经常会遇到这个问题。

不幸的是，修改或覆盖核心 Bootstrap CSS 是不可取的，并且可能导致不必要的副作用。侵入性最小的方法是添加 data-backdrop="false"，但您可能会注意到淡入淡出效果不再按预期工作。

在遵循 Bootstrap 的最新版本之后，版本 3.3.5 似乎解决了这个问题，没有不必要的副作用。

下载：https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

请务必包含 3.3.5 中的 CSS 文件和 JavaScript 文件。

我有一个更轻更好的解决方案..

它可以通过一些额外的 CSS 样式轻松解决..

隐藏类 .modal-backdrop （从 Bootstrap.js 自动生成） .modal-backdrop { display:none;可见性：隐藏； position:relative } 将 .modal 的背景设置为半透明的黑色背景图像。 .modal { background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png") // 来自谷歌图像的半透明图像 z-index:1100; }

如果您有需要模态框位于元素内而不靠近 </body> 标记的要求，这将最有效。

我通过将 data-backdrop="false" 添加到 div 解决了我的问题：

<div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

.....

嗨，我遇到了同样的问题，然后我意识到当您使用 bootsrap 3.1 时，与旧版本的 bootsrap (2.3.2) 不同，模态的 html 结构发生了变化！

你必须用 modal-dialog 和 modal-content 包裹你的模态页眉正文和页脚

<div class="modal hide fade">

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

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

    </div>
  </div>

 </div>

上面建议的解决方案都不适合我，但这种技术解决了这个问题：

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

我遇到了这个问题，最简单的解决方法是在模态对话框 div 上添加大于 1040 的 z-index：

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

我相信 bootstrap 创建一个 div modal-backdrop 淡入淡出，在我的例子中，z-index 为 1040，所以如果你把 modal-dialog 放在上面，它不应该再变灰了。

将 z-index .modal 设置为最高值

例如，.sidebarwrapper 的 z-index 为 1100，因此将 .modal 的 z-index 设置为 1101

.modal {
    z-index: 1101;
}

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

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

使用 google 调试器，可以检查元素 BACKDROP 并修改属性。祝你好运。

最简单的解决方案是将模态对话框移到任何容器之外，并在 <body> 元素下声明它：

<body>    
    <div>
        ...
    <div>
    
    
    <div class="modal">
        ... modal dialog here
    </div>
</body>

我已经尝试过这个解决方案，它对我有用。

来源：https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background

在您的导航栏中 navbar-fixed-top 需要 z-index = 1041 并且如果您使用 bootstarp-combined.min.css 也需要更改 .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

这对我有用：

sass: 
  .modal-backdrop
    display: none
  #yourModal.modal.fade.in
    background: rgba(0, 0, 0, 0.5)

您还可以从 .modal-backdrop 中删除 z-index。生成的 css 看起来像这样。

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }

我删除了模态背景。

.modal-backdrop {
    display:none;
}

这不是更好的解决方案，但对我有用。

我发现的是：

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

将此添加到您的页面。它对我有用。

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>

我通过将下面的样式添加到 DIV 标签来解决这个问题

style="background-color: rgba(0, 0, 0, 0.5);"

并添加自定义 css

.modal-backdrop {position: relative;}