javascript - 如何防止 Bootstrap 模式对话框的背景覆盖整个屏幕？

Question

当我添加 <div class='modal hide fade'>将对话框转换为固定定位(position:fixed in css)的div，并在此对话框上调用modal('show')，背景覆盖整个屏幕，无法与对话框进行交互。当父div不固定时，不存在这个问题。

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

顺便说一句，我正在使用 Bootstrap 2.3.2。

如果没有人知道这个特定问题，我稍后会发布一个 fiddle 。

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

如果您遇到这个问题，您可以像我一样不使用固定定位，或者像我们对 IE 所做的那样对 Chrome 进行一些特殊处理。