диалоговое окно на jQuery модальное за окно iframe
Я использую диалог jQuery UI для модальных всплывающих окон. У меня также есть несколько iframes на моей странице. IFrame (z-Index = 1500) находится поверх родительской страницы (z-index =1000). Я открываю модальный диалог с родительской страницы. Я пытаюсь установить z-индекс, используя $('modal').диалог ('option', 'zIndex', 3000); но это не работает. Я также попробовал stack: true (чтобы сложить его сверху), и .dialog ('moveToTop') также, но они, похоже, не работают.
вот код: Родительская страница:
использование таблицы стилей: из " css/ui-darkness / jquery-ui-1.7.2.традиция.стиль CSS" использование скриптов: jquery-1.3.2.минута.js && jquery-ui-1.7.2.традиция.минута.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.НТМ
.wrap{ширина: 100%; высота: 100%}
Я iframe и я злой
4 ответов
Я использую этот пост чтобы найти максимальный Z-индекс динамически, а затем назначить его во время разработки что-то вроде:
$(modal).dialog({ /* other properties */ , zIndex: $.maxZIndex()+ 1, })
как о
$('#modal').closest('div.ui-dialog').css('z-index', '3000')
Диалог пользовательского интерфейса jQuery отображает DIV с классом ui-dialog и он становится родителем вашего оригинального DIV, поэтому я использовал closest () чтобы найти его (не ссылаясь на него непосредственно по классу, если на странице есть больше диалогов).