如何防止引导模式对话框的背景覆盖整个屏幕？答案

【问题标题】：How to prevent the backdrop of bootstrap modal dialog from covering the whole screen?如何防止引导模式对话框的背景覆盖整个屏幕？
【发布时间】：2018-05-02 22:16:11
【问题描述】：

当我将<div class='modal hide fade'> 对话框添加到具有固定定位（位置：css 中固定）的 div 中，并在此对话框上调用 modal('show') 时，背景会覆盖整个屏幕，无法与之交互对话框。当父div不固定时，这个问题就不存在了。

如何在不改变 div 位置的情况下使用 Bootstrap Modal 对话框？

顺便说一下，我使用的是 Bootstrap 2.3.2。

如果没有人知道这个特殊问题，我稍后会发布小提琴。

【问题讨论】：

标签： javascript css twitter-bootstrap

【解决方案1】：

我最终通过使用 position:absolute 代替 position fixed 来解决这个问题。但我首先弄清楚了为什么会发生这种情况：这是 Chrome 独有的问题，因为在去年发布的某些版本的 Chrome 中，他们决定将固定元素放在与根上下文不同的层上下文中。这个链接解释得很清楚：http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements。

一个例子是这样的：如果元素 A（固定）的 z-index 为 1，另一个未固定元素 B 的 z-index 为 2，而另一个元素 C（A 的子元素）的 z-index 为 3。如果您渲染它们在 Chrome 中，B 在 C 之上，因为 C 在 A 的上下文中，而 B 在 A 之上，B-C-A。在其他浏览器中，图层是 C-B-A，正如预期的那样。

如果你遇到这个问题，你要么不使用固定定位，就像我做的那样，要么对 Chrome 做一些特殊的处理，就像我们对 IE 做的那样。

【讨论】：

【解决方案2】：

将外部 div 的 z-index 设置为比 modal-backdrop z-index（1040）更高的值对我有用。

#someDiv {
  position: fixed;
  z-index: 1041;
}

见this example。

【讨论】：

是的。但是如果#someDiv 包含一些html 内容，则该内容不会被背景覆盖。 jsfiddle.net/wwDxz/4 见红色方块。
原来这个“错误”是由 Chrome 的新功能引起的：updates.html5rocks.com/2012/09/…。 Chrome 也在做一些奇怪的事情来破坏 Web 开发人员的代码，叹息。

【解决方案3】：

您需要将此添加到您的代码 css 中

{body.modal-open div.modal-backdrop z-index: 0;}

【讨论】：