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

    In one of your comments, you mentioned using <object> tags to embed external HTML files. Here is an example using that method: HTML: <div id="links"> <a href="http://stuff.com" onclick="return go(this);">stuff</a> <a...
    Read more

    How can i dynamically change title of input type file?

    Try this code: DEMO JS: $('input').change(function(){ $(this).attr('title',($(this).val())); }); ...
    Read more

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

    The tables are a huge headache for diagnosing this problem since there is so much markup to look through. However, the tables are not the reason why your layout is...
    Read more

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

    JS: $(document).ready(function(){ $(".button").click(function () { var div= $("#"+this.name); div.toggle("slow").siblings().hide("slow"); }); }); HTML: <h1> <div class="arrow"></div> <a class="button" name="Show1" href="#"> <font size="5">QUESTION 1</font> </a> </h1> <div...
    Read more

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

    Absolutely positioning all of the elements by default -- as Visual Studio used to -- do is a terrible way to design a site. It was a bad idea then,...
    Read more

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

    If you have jQueryUI, I assume you have jQuery, so you could go with $('.ui-slider-handle').eq(0).addClass('my_beautiful_css_class') .eq(x) gives you the x+1th element in the array of results....
    Read more

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

    This is for print, right? Can't you just use this? <p style="page-break-before: always"></p> There are some other options to page-break-before that are worth knowing about too....
    Read more

    How to add new property within existing css?

    Writing background will override previously defined properties. Write: input[type="submit"], input[type="button"], .butLink{ background:#000; } ...
    Read more

    How to align icon inserted with :before method?

    You can use background and set is size (width, height), Then you can use vertical-align. CSS .button a:before { position: relative; display: inline-block; width: 18px; height: 16px; vertical-align: middle; content:"";...
    Read more

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

    z-index will work but it only works on positioned elements. So you need to position your dropdown menus either by declaring the position property to be either absolute, fixed or...
    Read more

    How to set different css attributes with JQuery?

    item in your code returns HTML element, not jQuery object. I would suggest you to change your code to: $("input[type=text]").each( function (index, item) { $( item ).css("z-index", index); }); ...
    Read more

    How to override a templates default option with javascript and css

    For a more accurate answer, please provide a link to the template. How can I call the previous code's functionality upon page load? Try to simulate a click of the...
    Read more

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

    Type selectors (e.g. body) and pseudo-element selectors (e.g. ::selection) do indeed have the same specificity, but specificity only comes into play when two selectors select the same element. The body...
    Read more

    How to make CSS drawn character responsive inside bootstrap column

    I suggest you change the units from 'px' to 'em', then use a media query to change the font-size, +/- around 1px. This works because 1em is the same size...
    Read more

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

    try this ... function changeBGImage(whichImage) { if (document.body) { document.body.style.backgroundImage = 'url(' + backImage[whichImage] + ')'; } } ... ...
    Read more

    How to alternate rowcolor in a GridView using pure CSS?

    You are using CSS3, which is not supported by all browsers. To do this in a cross-browser compatible way you need to use alternating class, jQuery, or some other method...
    Read more

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

    Something a bit different with :before and :after so that the html doesn't need to be modified. I would however probably consider using canvas instead as it will give more...
    Read more

    How to center equally spaced anchor tags in

    You can use css3 flexbox. Following css will create the result that you need. nav { display: flex; } nav a { flex-grow: 1; } nav { text-align: center; border:...
    Read more

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

    In CSS use "height" property not "max-height". The plugin will work. Example code at CODEPEN I hope it helps you....
    Read more

    How to apply css to a dynamically created div?

    As you are creating div with id #box, add the following css in the external css file and include it in the <head> #box { position: absolute; background: red; width:...
    Read more

    How to achieve parallax behind horizontal bars while scrolling

    This is achieved by exploiting the background attachment property on moving divs to create an effect that causes the images to appear to change, while it is in fact two...
    Read more

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

    line-height of .editor-label matching the height of .editor-field's input would get you a label that's always centered. Though I'm not sure if it's your specific case, but that's the whole...
    Read more

    Bootstrap dropdown div not showing in non-collapsed view

    Your problem is overflow: hidden on two divs. Delete this from your CSS: .navbar { overflow: hidden; } .navbar-2nd { overflow: hidden; } CODEPEN...
    Read more

    How to link to a “tab” on my website

    Add anchors to the end of your URL, ie http://URL/righttoweb#about and on $(document).ready() block of code pick up the anchor and using a hash table figure out what tab needs...
    Read more

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

    For n elements per row, there are n-1 gaps. If you want a 1% wide gap, that means the divs can occupy 97% of the width for 4 elements per...
    Read more

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

    Yes, you are gimbal locked, the rotateX value needs to be placed before the rotateY. Order is important for transforms. What happens in your case is that the 90 degree...
    Read more

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

    This is not a bug. I tend to think of 1 CSS Pixel to being equivalent to 1 Dip in a Native Android App. In the web you aren't expected...
    Read more

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

    Use a combination of Microsoft specific CSS rules to filter IE11: <!doctype html> <html> <head> <title>IE10/11 Media Query Test</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style> @media all and (-ms-high-contrast:none) {...
    Read more

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

    You cant do that with the code you have atm (well, yes you can with some rather "hacky" tricks...). I'd propose a clean solution: Wrap that text in a separate...
    Read more

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

    For the positioning I removed the .background-bubble margin-bottom:-17% and instead added top:-100px to .foreground-bubble since its position:relative. I also gave the wrapping div a new class "bubbles" and added margin-top:50px...
    Read more