如何防止引導模式對話框的背景覆蓋整個屏幕？

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;}