Bootstrap modal z-index

Question

The issue is: I'm using parrallx scrolling, so I have z-index in the page now when I try to popup a box-modal by Bootstrap I get him to look like this https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png

As you can see, the box-modal isn't on top and any mouse click disables it. if I disable this css code :

#content {     color: #003bb3;     position: relative;     margin: 0 auto;     width: 960px;     z-index: 300;     background: url('../images/parallax-philosophy-ltl.png') top center; } 

the box modal works. just to notice, Bootstrap default .modal is z-index:1050 , so I can't understand why it's not on top of all other context.

that's the box-modal:

   <section id="launch" class="modal hide fade">     <header class="modal-header">         <button type="button" class="close" data-dismiss="modal">&times;</button>         <h3>אשר הגעה לחתונה  </h3>     </header>     <div class="modal-body">         <form method="post" action="/update" id="myForm2">             <input type="radio"  id="yes_arrive" name="arrive" checked="checked" value="yes">מגיע<br>             <p><input type="text" required name="fsname" value="" placeholder="הכנס שם פרטי ומשפחה "></p>             <p>כמה אנשים מגיעים?   </p>             <select name="number" id="number">                 <option value="0">0</option>                 <option value="1">1</option>                 <option value="2">2</option>              </select>             <hr/>             <input type="hidden" name="title" id="title" value="{{title}}">             <input type="radio" name="arrive" id ="no_arrive" value="no">לא מגיע             <p>סיבה לאי הגעה</p>             <input type="text" name="no_arrive_reason" placeholder="קצר ולעניין, לא שדה חובה">             <hr/>             <p class="submit"><input type="submit" name="submit" value="שלח"></p>          </form>     </div>     <footer class="modal-footer">         <button class="btn btn-primary" data-dismiss="modal">Close</button>     </footer> </section> 

and I trigger him from top menu:

  <li><a class="launch" data-toggle="modal" href="#launch">Approve</a></li> 

thanks ahead.

EDIT

Solution found if anyone falls to the same problem. this is the way: add data-backdrop="false" to section or div that you contain the modal with e.g: <section id="launch" class="modal hide fade in" data-backdrop="false"> notice that it doesn't get the gray background that way, so it's kinda a dirty solution, will be happy to hear of a better one.

Answer 1

The problem almost always has something to do with "nested" z-indexes. As an Example:

<div style="z-index:1">   some content A   <div style="z-index:1000000000">     some content B   </div> </div> <div style="z-index:10">   Some content C </div> 

if you look at the z-index only you would expect B,C,A, but because B is nested in a div that is expressly set to 1, it will show up as C,B,A.

Setting position:fixed locks the z-index for that element and all its children, which is why changing that can solve the problem.

The solution is to find the parent element that has the z-index set and either adjust the setting or move the content so the layers and their parent containers stack up the way you want. Firebug in Firefox has a tab in the far right named "Layout" and you can quickly go up the parent elements and see where the z-index is set.

Answer 2

I found this question as I had a similar problem. While data-backdrop does "solve" the issue; I found another problem in my markup.

I had the button which launched this modal and the modal dialog itself was in the footer. The problem is that the footer was defined as navbar_fixed_bottom, and that contained position:fixed.

After I moved the dialog outside of the fixed section, everything worked as expected.