CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
NeoWang
NeoWang

Reputation: 18513

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

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.

Upvotes: 2

Views: 4535

Answers (3)

Hina Sohail
Hina Sohail

Reputation: 9

You need to add this to your code css

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

Upvotes: -1

NeoWang
NeoWang

Reputation: 18513

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.

Upvotes: 2

ringstaff
ringstaff

Reputation: 2325

Setting the outer div's z-index to a higher value than the modal-backdrop z-index (which was 1040) worked for me. 

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

See this example.

Upvotes: 0

Related Questions