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.


    CSS Howto..

    How to make one div's height depended of another div's height?

    How do I fix the image size when changing to another image?

    How can I display 2 big buttons next to each other html & css

    How to set bold only to first level list elements? [duplicate]

    How to revert to original CSS?

    How to add new property within existing css?

    How to go from scrolling to fixed header [closed]

    How to make div height 100% inside relative div?

    How to make divs appear and disapear on hover in css?

    Border of outer element affects how margin of inner element is displayed, why?

    How to load specific set css commands only at the first browsing of the web site?

    How to develop a solid CSS strategy?

    How do I get Html Table to respect margins when its width is set to 100%?

    How to create a circumference with CSS? [closed]

    Using pure Javascript to show contents of list on click only on mobile and show initially on desktop

    Using CSS approach how to set an image to fill a path in SVG?

    How to create the masonry effects with just bootstrap 3 grid system and css

    How to implement css classes in form using laravel collective 5.2 . *

    How to specify different Css for different Mobiles (BB, Iphone, Nexus… )

    How to use CSS to surround a number with a circle?

    How am I supposed to address elements that are not a direct child of a given element in CSS?

    How to toggle multiple images in jquery?

    How to set the background image of an DIV in CSS?

    How do I create a mobile version of Nav Bar [closed]

    How can I include CSS in php?

    How is CSS/HTML Rendered In Browsers?

    How can we prevent that when I resize my window, my images move using HTML-CSS?

    How to pause css animation?

    How to put a background video loop on a website HTML/CSS

    How to Center Logo in Responsive Header [closed]