Bootstrap Modal 坐在背景后面答案

【问题标题】：Bootstrap Modal sitting behind backdropBootstrap Modal 坐在背景后面
【发布时间】：2014-01-07 22:17:08
【问题描述】：

所以我遇到了与@Jamescoo 几乎完全相同的问题，但我认为我的问题来自于我已经定位了几个 DIV 来创建滑动导航面板的事实。

这是我复制的确切设置：http://jsfiddle.net/ZBQ8U/2/

奖励：如果您愿意，请随意获取滑动面板的代码 :)

z-index 不应冲突，它们的值会显示它们正确堆叠，但在视觉上它们不是。

单击“打开模式”按钮后，<div class="modal-backdrop fade in"></div> 将覆盖所有内容！（您必须重新运行代码才能重置它）

我不知道如何解决这个问题...有什么想法吗？

【问题讨论】：

这似乎是same issue as here;请参阅已接受的答案以进行更深入的讨论。
@TobyJ 提供的链接有答案，但不是“接受”的答案；）亚当奥尔布赖特的答案是最有效的答案，没有任何复杂性。也就是说，如果您使用的是 jQuery。
检查一下我已经更新了你的 jsfiddle jsfiddle.net/ZBQ8U/513

标签： css twitter-bootstrap modal-dialog z-index

【解决方案1】：

只需将整个模态框移到其余代码之外的最底部即可。它不需要嵌套在除主体之外的任何其他元素中。

<body>
    <!-- All other HTML -->
    <div>
        ...
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
        ...
    </div>
</body>

Demo

他们在文档中暗示了这个解决方案。

模态标记放置
始终尝试将 modal 的 HTML 代码放在文档的顶级位置以避免其他组件影响模态框的外观和/或功能。

【讨论】：

谢谢！按照建议移动模态就完美了！大家，一定要阅读下面@davidpauljunior 对.modal-backdrop 为何掩盖一切的深入解释！
我这样写了我的代码，但它仍在发生。 ://
这实际上是我的问题的解决方案。我的 div 是 Struts 的形式。
@KehlanKrumme 这不是 Bootstrap 的错。理解“堆叠上下文”对于解决这个问题是必要的。好读：philipwalton.com/articles/what-no-one-told-you-about-z-index

【解决方案2】：

就我而言，我可以通过为 .modal-backdrop 添加 css 来修复它

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

虽然这可行，但表单控件似乎仍然出现在背景上方，单击任意位置都会关闭模式，但看起来不太好。

对我来说更好的解决方法是绑定到显示的事件（加载页面后）并更正 z-index 属性。

$('.modal').on('shown.bs.modal', function() {
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

在这种情况下，如果您可以在显示的模式上更改 DOM：

$('.modal').on('shown.bs.modal', function() {
  //Make sure the modal and backdrop are siblings (changes the DOM)
  $(this).before($('.modal-backdrop'));
  //Make sure the z-index is higher than the backdrop
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

【讨论】：

唯一适用于我的解决方案！谢谢你。顺便说一句，CSS部分对我来说已经足够了
z-index: -1;制作了一些页面元素来覆盖背景。 $(this).before($('.modal-backdrop'));效果更好，但是当您向下滚动时，页面元素开始出现。解决方案是将模态窗口移出正文。查看我的回复。
哇，非常感谢！ :) 第三个代码块 sn-p 对我有用 :)

【解决方案3】：

虽然.modal的z-index高于.modal-backdrop的z-index，但.modal在父div中#content-wrap的z-index低于.modal-backdrop（z-index : 1002 vs z-index: 1030)。

因为父级的 z-index 低于 .modal-backdrop，所以其中的所有内容都将落后于模态，而与给子级的任何 z-index 无关。

如果您删除了在body div#fullContainer #content-wrap 和#ctrlNavPanel 上设置的z-index，一切似乎都正常。

body div#fullContainer #content-wrap {
  background: #ffffff;
  bottom: 0;
  box-shadow: -5px 0px 8px #000000;
  position: absolute;
  top: 0;
  width: 100%;
}

#ctrlNavPanel {
  background: #333333;
  bottom: 0;
  box-sizing: content-box;
  height: 100%;
  overflow-y: auto;
  position: absolute;
  top: 0;
  width: 250px;
}

注意：我认为您最初可能在 #content-wrap 和 #ctrlNavPanel 上使用了 z-indexes 以确保导航位于后面，但这不是必需的，因为 nav 元素位于 HTML 中的 content-wrap 之前，所以你只需要定位它们，而不是显式设置堆叠顺序。

编辑正如 Schmalzy 所说，这些链接不再是可点击的。这是因为整个容器是 100% 宽的，因此覆盖了导航。解决此问题的最快方法是将导航放置在该 div 中：

<div id="fullContainer">
  <aside id="ctrlNavPanel">
    <ul class="nav-link-list">
      <li><label>Menu</label></li>
      <li><a href="/"><span class="fa fa-lg fa-home"></span> Home</a></li>
      <li><a><span class="fa fa-lg fa-group"></span>About Us</a></li>
      <li><a><span class="fa fa-lg fa-book"></span> Contacts</a></li>
    </ul>
  </aside>
  <div id="content-wrap">
    ...
  </div>
</div>

DEMO HERE

【讨论】：

投反对票的人可以解释为什么这是不正确的吗？
抱歉，我正要这样做.. 删除 z-index 似乎破坏了他的#ctrlNavPanel。链接不再有效。
啊，很好看！为此添加了 HTML 编辑修复程序。谢谢
@davidpauljunior 非常深入的解释！非常感谢您的快速回复！！这对于像我在这种情况下一样在 z-indexing 上苦苦挣扎的其他人非常有帮助。我必须向@Schmalzy 点头，尽管它抓住了#ctrlNavPanel 中断，并且建议将模式移动到代码底部，就在结束正文标记</body> 之前。

【解决方案4】：

没有一个答案对我来说足够好。问题似乎出在模态窗口需要在 body 之外的地方。这不是最好的

所以这段代码完美地完成了这项工作：

$('.modal ').insertAfter($('body'));

$('#product_' + product_id + ' .modal ').insertAfter($('body'));

【讨论】：

对我来说也一样。具有索引的解决方案仅适用于“haflish”。那里仍然隐藏在背景后面的元素。这种将模态移到体外的解决方案效果很好。谢谢！
这使得模式中的输入无法在 IE11（可能还有其他版本）上运行。如果您在 modal 中有输入，请勿使用此解决方案。

【解决方案5】：

我对将模态内容移到其原始上下文之外持谨慎态度：其他 JS 或样式可能取决于该上下文。

但是，我怀疑是否有任何脚本或样式需要背景的特定上下文。

所以我的解决方案是移动与模态内容相邻的背景，强制它进入相同的堆叠上下文：

$(document).on('shown.bs.modal', '.modal', function () {
    $('.modal-backdrop').before($(this));
});

只是与jacoswarts'solution略有偏差，谢谢你的启发！

【讨论】：

【解决方案6】：

如果您真的不需要它，请尝试移除背景(data-backdrop= "false"):

<div class="modal fade" data-backdrop="false" role="dialog" id="my-modal" aria-labelledby="modal-title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="modal-title">No Backdrop</h3>
                </div>
                <div class="modal-body">
                    <p>
                        Look! No backdrop here!
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary">Ok</button>                    </div>
            </div>
        </div>
    </div>

【讨论】：

【解决方案7】：

有些日子我正在与同样的问题作斗争......我找到了三个可能的解决方案，但我不知道哪个是最佳的，如果有人告诉我，我将不胜感激。

修改将在 bootstrap.css 中

选项1：

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040; <- DELETE THIS LINE
  background-color: #000000;
}

选项 2：

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; <- MODIFY THIS VALUE BY -1
  background-color: #000000;
}

选项 3：

/*ADD THIS*/
.modal-backdrop.fade.in {
    z-index: -1;
}

我使用了选项 2。

【讨论】：

【解决方案8】：

在我的情况下，我的模态的父母之一是动画并且有这个

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 100;
}

这里的拦截器是animation-fill-mode: both;。我不能只是将模态移到外面，所以解决方案是将“动画填充模式”覆盖为animation-fill-mode: none;。动画仍然可以正常工作。

【讨论】：

这个答案被严重忽视了。

【解决方案9】：

我知道已经很晚了，我遇到了同样的问题，但我不得不将其破解如下；

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

.modal{
    /* bug fix - custom overlay */   
    background-color: rgba(10,10,10,0.45);
}

【讨论】：

【解决方案10】：

如果您不想修改 bootstrap.css，另一种解决此问题的方法是在 bootstrap-dialog.css 文件中将 z-index: 0; 添加到 .modal-backdrop 类。

【讨论】：

【解决方案11】：

如果我们不能删除背景和/或我们有组件框架，如 angular 或 vue，我们不能将 modal 移动到根。我做了这个技巧：将我的自定义模态背景容器（带有附加类）作为模态对话框容器的兄弟并添加了一些 css

<div bsModal #moneyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
    <!-- magic container-->
    <div class="modal-holder modal-backdrop" (click)="moneyModal.hide()"></div>
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                ....
            </div>
        </div>
    </div>
</div>

和css

.modal-backdrop{z-index: -1}// or you can disable modal-backdrop
.modal-holder.modal-backdrop{z-index: 100}
.modal-holder + .modal-dialog {z-index: 1000}

【讨论】：

【解决方案12】：

你可以用这个：

<div
  class="modal fade stick-up disable-scroll"
  id="filtersModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="filtersModal"
  aria-hidden="false"
  style="background-color: rgba(0, 0, 0, 0.5);" data-backdrop="false"
>
....
</div>

Adding style="" and data-backdrop false would fix it.

【讨论】：

【解决方案13】：

对于那些使用 ASP.NET MVC，

需要将模态 div 移动到 </body> 标记之前，但由于您使用的是 Layout 页面

，因此无法这样做

在 _Layout.cshtml 文件中在 body 标记之前定义一个部分，例如：

... some html in layout page ...
@RenderSection("bottomHTML", required: false)
</body>
</html>

那么在你看来

@section bottomHTML 
{
<div class="modal fade" id="myModalID" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal" aria-hidden="true">
... rest of the modal div HTML ...
}

这样，模态 HTML 将在 body 标签之前呈现，模态现在应该正确显示..

【讨论】：

【解决方案14】：

如果您使用 JQuery，您可以使用 appendTo() 将模态附加到特定元素，在这种情况下，在大多数情况下，简单的一行可以将您的模态移动到背景顶部，而不管您的模态div的位置

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

这里是 JQuery appendTo 函数的参考： http://api.jquery.com/appendto/

我已将其更新为您的小提琴 http://jsfiddle.net/ZBQ8U/240/

【讨论】：

这太棒了，我尝试了 insertafter body 但我在模态中遇到了样式问题，但是我使用了 $('.modal').appendTo($('body'));它奏效了

【解决方案15】：

只需移除背景，将此代码插入您的 css 文件中

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

【讨论】：

【解决方案16】：

如果 [.modal] 元素的任何祖先设置了 CSS 属性 z-index，问题仍然存在。 [.modal] 元素从该容器元素继承 CSS z-index。而 [.modal-backdrop] 是从 jQuery 代码动态插入到 [body] 元素中的，默认 z-index: 1040 来自 bootstrap.css。

我提出了两种方式的 CSS 解决方案，比更改默认事件和元素的任何其他行为要好。

为 [.modal] 的父元素设置 z-index: 1041 或更高值，该祖先元素导致 [.modal] 在 [.modal-backdrop] 下方。

或者

如果可用，请在 CSS 文件中为 [.modal-backdrop] 设置 z-index: 1039 或更低的值。因为 HTML [.modal-backdrop] 在您的代码中不可用。

[注意：CSS z-index 属性可能需要使用!important 标志]

[注意：[.modal-backdrop] 的默认z-index: 1040 完全依赖于bootstrap.css]

【讨论】：

【解决方案17】：

只需删除z-index: 1040；

从此文件bootstrap.css 类.modal-backdrop

【讨论】：

【解决方案18】：

我错过了跟随 html

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

添加它并且没有问题

【讨论】：

【解决方案19】：

因为我没有机会移动模态标记，因为我将它添加到条件内的部分模板中，所以对我有用的是添加 CSS 波纹管

.modal.fade {
    display: none;
}

然后，当boostrap添加类“in”通过js应用显示：块，一切正常。

【讨论】：

【解决方案20】：

我发现在引导程序后应用离子框架（ionic.min.cs）为我解决了这个问题。

【讨论】：

【解决方案21】：

如果您不能将模态框置于根目录（例如，如果您使用 angular 并且模态框位于控制器中），则 modifying 引导或使用 js 是显然是一个不好的解决方案。

所以说你有你的网站结构：

//not working
<div>
    <div>
        <div>
            <modal></modal>
        </div>
    </div>
</div>

打开您的代码检查器并将模式移动到根目录，它应该可以工作（但没有您想要的地方）：

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
</div>
<modal></modal>

现在将它放在第一个 div 中并检查它是否正常工作：如果是，请检查下一个子元素，直到它不工作并找到问题所在的 div；

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
    <modal></modal>
</div>

一旦您知道哪个 div 是问题所在，您就可以使用 css 显示和位置来使其正常工作。

每个人都有不同的结构，但在我的情况下，将父级设置为 display: table; 是解决方案

【讨论】：

【解决方案22】：

将此代码放在任何你想要的地方

$('.modal').on('shown.bs.modal', function () {
    var max_index = null;
    $('.modal.fade.in').not($(this)).each(function (index , value){
        if(max_index< parseInt( $(this).css("z-index")))
            max_index = parseInt( $(this).css("z-index"));
    });
    if (max_index != null) $(this).css("z-index", max_index + 1);
});

【讨论】：

【解决方案23】：

很多时候，您不能将模态框移到外面，因为这会影响您的设计结构。

背景出现在模态框上方的原因是父级设置了任何位置。

解决问题的一个非常简单的方法是将模态框移到外面，如果你有模态框，则将背景移到结构内部。在你的情况下，它可能是

$(".modal-backdrop").appendTo("main");

请注意，如果您的应用程序有明确的结构并且您不能将模态移到外面，因为它会违反设计结构，则此解决方案适用

【讨论】：

【解决方案24】：

只需将模态框移到所有 div 内容之外，主要放在关闭正文之前。

【讨论】：

【解决方案25】：

首先确保模态框不在任何父 div 中。然后加 $('#myModal').appendTo("body")

对我来说效果很好。

【讨论】：

【解决方案26】：

除了这里的所有答案，我发现，bootstrap4“动画淡入”也导致了这个错误（背景后面不可点击的模式）：

检查您的模态是否在以下父标签中（引导动画）

<div class="animated fadeIn"></div>

我删除了这个标签 - 为我解决了这个问题。

【讨论】：

【解决方案27】：

这对我有用。

<div class="modal fade" id="modalDecision" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <asp:Label runat="server" Height="30px">Please select recovery delivery option</asp:Label>
            <asp:LinkButton ID="btnEmail" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Email</asp:LinkButton>
            <asp:LinkButton ID="btnText" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Text</asp:LinkButton>
        </div>
    </div>
</div>

var element = $('#modalDecision');
    // also taken from bootstrap 3 docs
    $(element).on('shown.bs.modal', function (e) {
        // keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far...
        var backDrop = $("<div class='modal-backdrop' style='z-index:-1;opacity:.5'></div>");
        $(element).append($(backDrop));
    });

【讨论】：

【解决方案28】：

我遇到了这个问题，在调查了我的css之后，主容器（body的直接孩子）有：

position: relative
z-index: 1

删除这两个属性后，背景效果很好。如果主包装器有 position: fixed

，您也可能会遇到此问题

【讨论】：

【解决方案29】：

我遇到了类似的问题，即淡入淡出不起作用，并且叠加层留在了页面上。我将动态内容添加回页面（仅在模态操作中刷新某些内容）。我也有这个 $('#rejectModal-'+itemId).modal('hide') （itemId 是单个页面中多个模式的动态ID，用于拒绝某些信息），但问题仍然没有消失。

由于我的布局在局部视图中未设置为 null，因此叠加层保持不变设置后问题就消失了：

@{ 
    Layout = null;
}

【讨论】：

【解决方案30】：

如果你有嵌套模式，这就是线索：

$('body').on('shown.bs.modal', '.modal', function (e) {
    e.stopPropagation();
    $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

【讨论】：