Мне нужно показать 2 модальных окна одновременно.Из-за того, что в содержимом первого диалога необходимо использовать абсолютное позиционирование и z-индексирование, z-индекс оверлея важен для меня.
Проблема, которую я получаю, состоит в том, что, если я показываю первый модал с z-индексом 300, наложение получает z-индекс 301. Если я затем показываю другой модал с z-индексом 500,новый оверлей получает z-индекс 501. Если я закрою оба модала и снова открою первый модал, вместо того, чтобы получить оверлей с z-индексом 301, это 503.
Вот примерcode.
<html>
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#modal').hide();
$('#success-message').hide();
$('#show-modal-button').click(function(){
$('#modal').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 400
});
});
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
});
</script>
</head>
<body>
<input type="button" id="show-modal-button" value="show modal"/>
<div id="modal">
<input type="button" id="modal-button" value="push"/>
</div>
<div id="success-message"><p>test</p></div>
</body>
</html>
UPDATE Мне удалось заставить это работать, удалив виджет из DOM при закрытии, используя код ниже.Я чувствую, что это хак и что это либо ошибка, либо что я делаю что-то не так в своем подходе.Я опубликую свое решение как ответ, если никто не скажет мне, что я делаю неправильно.
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
$(this).dialog('widget').remove();
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});