How to prevent the backdrop of bootstrap modal dialog from covering the whole screen?

Tags: javascript,css,twitter-bootstrap

Problem :

When I add a <div class='modal hide fade'> dialog into a div with fixed positioning (position:fixed in css), and call modal('show') on this dialog, the backdrop cover the whole screen, making it impossible to interact with the dialog. When the parent div is not fixed, this problem doesn't exists.

How can I use Bootstrap Modal dialog without changing the positioning of div?

I am using Bootstrap 2.3.2 by the way.

I will post a fiddle later, if no one is aware of this particular problem.

---

Solution :

I end up solving this problem by using position:absolute in place of position fixed. But I figured out why this happens in the first place: This is a Chrome-only problem, because in some version of Chrome released last year, they decide to put fixed elements in a different layer context from the root context. This link explains it clearly: http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements.

An example is like this: if element A(fixed) has z-index 1, and another unfixed element B has z-index 2, yet another element C (child of A) has z-index 3. If you render them in Chrome, B is above C, because C is in A's context, and B is above A, B-C-A. In other browsers, the layers are C-B-A, as expected.

If you encounter this problem, you could either not use fixed positioning, like I did, or do some special handling for Chrome, like we always do with IE.