jQuery modal Dialog over iFrame
- by Ram
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.
Here is the code:
Parent page:
using style sheet : from "css/ui-darkness/jquery-ui-1.7.2.custom.css"
using scripts: jquery-1.3.2.min.js && jquery-ui-1.7.2.custom.min.js
<script type="text/javascript" language="javascript">
function TestModal() {
var modal = "<div id='modal'>Hello popup world</div>";
$(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();
});
</script>
<div>
Hello World
<br />
</div>
<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">
</iframe>
iframe : blocker.htm
.wrap{width:100%;height:100%}
I am an iframe and I am evil
