Databases
StackOverflow2013
Postsdbo
POBootstrap modal z-index
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap modal z-index
    text
    copied!<p>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 <a href="https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png" rel="noreferrer">https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png</a></p> <p>As you can see, the box-modal isn't on top and any mouse click disables it. if I disable this css code :</p> <pre><code>#content { color: #003bb3; position: relative; margin: 0 auto; width: 960px; z-index: 300; background: url('../images/parallax-philosophy-ltl.png') top center; } </code></pre> <p>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.</p> <p>that's the box-modal:</p> <pre><code> &lt;section id="launch" class="modal hide fade"&gt; &lt;header class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt; &lt;h3&gt;אשר הגעה לחתונה &lt;/h3&gt; &lt;/header&gt; &lt;div class="modal-body"&gt; &lt;form method="post" action="/update" id="myForm2"&gt; &lt;input type="radio" id="yes_arrive" name="arrive" checked="checked" value="yes"&gt;מגיע&lt;br&gt; &lt;p&gt;&lt;input type="text" required name="fsname" value="" placeholder="הכנס שם פרטי ומשפחה "&gt;&lt;/p&gt; &lt;p&gt;כמה אנשים מגיעים? &lt;/p&gt; &lt;select name="number" id="number"&gt; &lt;option value="0"&gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;/select&gt; &lt;hr/&gt; &lt;input type="hidden" name="title" id="title" value="{{title}}"&gt; &lt;input type="radio" name="arrive" id ="no_arrive" value="no"&gt;לא מגיע &lt;p&gt;סיבה לאי הגעה&lt;/p&gt; &lt;input type="text" name="no_arrive_reason" placeholder="קצר ולעניין, לא שדה חובה"&gt; &lt;hr/&gt; &lt;p class="submit"&gt;&lt;input type="submit" name="submit" value="שלח"&gt;&lt;/p&gt; &lt;/form&gt; &lt;/div&gt; &lt;footer class="modal-footer"&gt; &lt;button class="btn btn-primary" data-dismiss="modal"&gt;Close&lt;/button&gt; &lt;/footer&gt; &lt;/section&gt; </code></pre> <p>and I trigger him from top menu:</p> <pre><code> &lt;li&gt;&lt;a class="launch" data-toggle="modal" href="#launch"&gt;Approve&lt;/a&gt;&lt;/li&gt; </code></pre> <p>thanks ahead.</p> <h2>EDIT</h2> <p>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: <code>&lt;section id="launch" class="modal hide fade in" data-backdrop="false"&gt;</code> 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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload