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:

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 do I load a nested web page in a
    tag using only javascript and html?

    How can i dynamically change title of input type file?

    How can
    's with 100% width, yet discrepancies in mobile browsers, be combatted?

    How to insert css arrow into html page and make it clickable

    What is the problem with Visual Studio.Net's “absolute positioning”, and how is that problem fixed by CSS's “absolute positioning”?

    CSS: how to refer to second child class of a div

    How do I emulate a page break with CSS and HTML?

    How to add new property within existing css?

    How to align icon inserted with :before method?

    Css Drop down menu, how to keep menu infront of content

    How to set different css attributes with JQuery?

    How to override a templates default option with javascript and css

    Why was ::selection removed from the CSS Selectors spec, and how does its specificity work against type selectors?

    How to make CSS drawn character responsive inside bootstrap column

    How to change background image with static css and maintain it?

    How to alternate rowcolor in a GridView using pure CSS?

    How to create a horse-shoe-like gauge using CSS

    How to center equally spaced anchor tags in

    Navbar doesn't scroll to show links on smaller devices when using nicescroll plug-in

    How to apply css to a dynamically created div?

    How to achieve parallax behind horizontal bars while scrolling

    how to align editor-label with editor-field in css

    Bootstrap dropdown div not showing in non-collapsed view

    How to link to a “tab” on my website

    Flexbox: How do I create my thumbnails to span 100% of the container width?

    How can I make the side elements spin on the x-axis in this animation?

    How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?

    How to write a CSS hack for IE 11? [duplicate]

    How to hide only a part of the content of a li with CSS?

    How to overlay/overlap two div's designed with css to look like text bubbles?