Ich verwende jQuery UI-Dialog für modale Popups. Ich habe auch einige iframes in meiner Seite. Der iFrame (z-Index = 1500) befindet sich auf der übergeordneten Seite (z-index = 1000). Ich öffne den modalen Dialog von der Elternseite. Ich versuche den Z-Index mit $ ('modal') zu setzen. Dialog ('option', 'zIndex', 3000); aber das funktioniert nicht. Ich habe auch versucht, stack: true (um es oben zu stapeln) und .dialog ('moveToTop'), aber sie scheinen nicht zu funktionieren. HierjQuery modal Dialog über iFrame
ist der Code: Geordnete Seite:
Stylesheet: von "css/ui-Dunkelheit/jquery-ui-1.7.2.custom.css" Skripte: 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%}
Ich bin ein iframe und ich bin böse
Update: die 2 bereitgestellten Lösungen funktionierten nicht. Ich benutze http://www.west-wind.com/weblog/posts/876332.aspx, um den maximalen Z-Index dynamisch zu finden und ihn dann zur Entwurfszeit etwas wie $ (modal) .dialog ({/ * andere Eigenschaften * /, zIndex: $ .maxZIndex() + 1,}) – ram