Databases
StackOverflow2013
Postsdbo
POJquery Modal background overlapping the modal box
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery Modal background overlapping the modal box
    text
    copied!<p>I'm creating a custom modal alert box for a few of my forms and they seem to be working fine, except the modal background seems to be overlapping my modal box...and this is an issue because you can't click on it at all or see it well.</p> <p>I created a jsFiddle here <a href="http://jsfiddle.net/JBUqf/2/" rel="nofollow">http://jsfiddle.net/JBUqf/2/</a> but it seems jsfiddel just doesn't like the modal function.</p> <p>A jsFiddle that actually works! Thanks @Ali <a href="http://jsfiddle.net/NUCgp/208/" rel="nofollow">http://jsfiddle.net/NUCgp/208/</a></p> <p>My html looks like this</p> <pre><code> &lt;div class="modal_window" id="authorCover"&gt; &lt;div class="modal_heading"&gt;&lt;h2&gt;Modal Heading&lt;/h2&gt;&lt;/div&gt; &lt;div class="modal_content"&gt; &lt;p&gt;This is the Modal Content Area.&lt;/p&gt; &lt;/div&gt; &lt;div class="modal_footer"&gt; &lt;button class="modal_close" href="#authorCover"&gt;Close&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;button class="btn btn-small btn-danger pull-right modalCall" href="#authorCover"&gt;Submit&lt;/button&gt; </code></pre> <p>my css looks like this</p> <pre><code>.modal_window{ display: none; background:#fff; left:50%; margin:-200px 0 0 -40%; position:fixed; top:50%; width:80%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow:0 3px 7px rgba(0,0,0,.25); -moz-box-shadow:0 3px 7px rgba(0,0,0,.25); -webkit-box-shadow:0 3px 7px rgba(0,0,0,.25); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; z-index: 5000; padding: 0; } .modal_heading{ background:#F7F7F7; border-bottom: 1px solid #e7e7e7; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; padding: 10px; } .modal_heading h2{ margin: 0px; } .modal_content{ padding: 10px; } .modal_footer{ background:#F7F7F7; border-top: 1px solid #e7e7e7; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; padding: 10px; } </code></pre> <p>and my jQuery looks like this</p> <pre><code>$('.modalCall').on('click', function(){ $(this).closest('.form-group').find('.modal_window').modal(); return false; }); </code></pre> <p><b>I have tried upping the z-index on the modal box as well as trying to lower it on the background that is automatically generated, but it doesn't have any effect.</b></p> <p>I have also tried to put a position absolute on it, which only messed up the styles already placed on the box. </p> <p>Am I missing something?</p> <p>Edit: I am not looking for a hide() show() solution. I am trying to use the specific modal() function.</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