Question

当我将<div class='modal hide fade'>对话框添加到具有固定定位（位置：固定在css中）的div中，并在此对话框上调用模态（'show'）时，背景覆盖整个屏幕，使得无法与对话框交互。如果未修复父div，则此问题不存在。

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

我顺便使用Bootstrap 2.3.2。

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

Answer 1

我最终通过使用position：absolute代替固定位置来解决这个问题。但我弄清楚为什么会发生这种情况：这是仅限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，BCA之上。在其他浏览器中，层是C-B-A，正如预期的那样。

如果您遇到此问题，您可能不会像我一样使用固定定位，或者对Chrome进行一些特殊处理，就像我们一直使用IE一样。

Answer 2

将外部div的z-index设置为比模态背景z-index（1040）更高的值。

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

请参阅this example。

Answer 3

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

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

如何防止bootstrap模态对话框的背景覆盖整个屏幕？

3 个答案: