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

Question

当我在具有固定位置的div中添加<div class='modal hide fade'>对话框（position：fixed在CSS中），并在此对话框上调用modal（'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索引为1，另一个未固定元素B的z索引为2，另一个元素C（A的子元素）的z索引为3。 ，B在C之上，因为C在A的上下文中，而B在A之上，即BCA。 在其他浏览器中，层是CBA，与预期的一样。

如果遇到此问题，则不能像我一样使用固定定位，也不能像我们对IE一样对Chrome进行一些特殊处理。

Answer 2

将外部div的z-index设置为比模式背景z-index（即1040）高的值对我有用。

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

请参阅此示例 。

Answer 3

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

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