Databases
StackOverflow2013
Postsdbo
POBlockUI shows div, but blocks form
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBlockUI shows div, but blocks form
    text
    copied!<p>I'm trying to create a force sign up form using blockUI. My problem is that when I fade in the sign up div and initiate blockUI, my signup div shows up above the block, but the form within the div is unusable and grayed out. Here is my code:</p> <p>HTML:</p> <pre><code>&lt;div id="popup-main"&gt; &lt;div id="popup-container"&gt; &lt;div id="popup-logo"&gt; &lt;/div&gt; &lt;div id="popup-form"&gt; &lt;form id="popup-signup-form" name="popup-signup"&gt; Name:&amp;nbsp;&amp;nbsp;&lt;input id="popup_name" type="textbox"&gt;&lt;br&gt; Email:&amp;nbsp;&amp;nbsp;&lt;input id="popup_email" type="textbox"&gt;&lt;br&gt; Phone Number:&amp;nbsp;&amp;nbsp;&lt;input id="popup_phone" type="textbox"&gt;&lt;br&gt; &lt;br&gt; &lt;input type="checkbox" name="newlistings" value="Yes"&gt;Would you like to be notified of new listings by email? &lt;br&gt; &lt;input type="checkbox" name="ebook" value="Yes"&gt;Would you like to recieve a free ebook? &lt;input type="button" name="popup-submit-button" value="Join"&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>jQuery:</p> <pre><code>$(document).ready(function() { var visited = $.cookie("cookie1") if (visited == null) { $("#popup-main").hide().delay(3000).fadeIn("slow", function() { $.blockUI({ message: null } ); }); } </code></pre> <p>So my main div containing my form is called popup-main, which is not displayed until it fades in after 3 seconds on page load. Once its faded in, blockUI is turned on. The z-index for popup-main is 9999 which gets it above the block. I was going to just have popup-main show up as a message like this:</p> <pre><code>$.blockUI({ message: $('#popup-main') }); </code></pre> <p>But when I do it this way, all of my elements are shifted to the center. Is there anyway to either stop the elements from shifting center when inside the message? Or some way to exempt the form within popup-main from being blocked? Any help is greatly appreciated!</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