Databases
StackOverflow2013
Postsdbo
POjQuery modal Dialog over iFrame
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery modal Dialog over iFrame
    text
    copied!<p>I am using jQuery UI dialog for modal popups. I have some iframes in my page as well. The iFrame (z-Index = 1500) sits on top of the parent page (z-index =1000). I open the modal dialog from the parent page. I am trying to set the z-index using $('modal').dialog('option','zIndex',3000); but this is not working. I also tried stack:true (to stack it on top), and .dialog( 'moveToTop' ) as well, but they don't seem to work.</p> <p>Here is the code: Parent page: </p> <p>using style sheet : from "css/ui-darkness/jquery-ui-1.7.2.custom.css" using scripts: jquery-1.3.2.min.js &amp;&amp; jquery-ui-1.7.2.custom.min.js</p> <pre><code>&lt;script type="text/javascript" language="javascript"&gt; function TestModal() { var modal = "&lt;div id='modal'&gt;Hello popup world&lt;/div&gt;"; $(modal).dialog({ modal: true, title: 'Modal Popup', zIndex: 12000, // settin it here works, but I want to set it at runtime instead of setting it at design time close: function() { setTimeout(TestModal, 5000); $(this).remove(); } }); $('modal').dialog('option', 'zIndex', 11000); // these dont work $('modal').dialog('moveToTop'); // these dont work $('modal').dialog('option', 'stack', true); // these dont work } /** Run with defaults **/ $(document).ready(function() { TestModal(); }); &lt;/script&gt; &lt;div&gt; Hello World &lt;br /&gt; &lt;/div&gt; &lt;iframe src="blocker.htm" width="100%" height="100%" frameborder="0" scrolling="no" name="myInlineFrame" style="z-index:10000;background-color:Gray;position:absolute;top:0px;left:0px" ALLOWTRANSPARENCY="false"&gt; &lt;/iframe&gt; </code></pre> <p>iframe : blocker.htm</p> <p> .wrap{width:100%;height:100%} </p> I am an iframe and I am evil <p> </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