最后一个jQuery模态对话框z-index将覆盖初始模态z-index [英] Last jQuery modal dialog z-index overrides initial modal z-index
问题描述
我遇到的问题是如果我在z-index显示第一个模态为300，则覆盖得到一个z-index为301.如果我再显示另一个模态如果我们关闭了两个模态，再次打开第一个模态，而不是获得z-index为301的叠加，那么它是503.
这是一些示例代码。
< html>
< head>
< link type =text / csshref =css / ui-lightness / jquery-ui-1.8.13.custom.css =stylesheet/>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.jstype =text / javascript>< / script>
< script src =https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.jstype =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，
标题：'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 '，
r可以：false，
zIndex：500
}）;
}）;
}）;
< / script>
< / head>
< body>
< input type =buttonid =show-modal-buttonvalue =show modal/>
< div id =modal>
< input type =buttonid =modal-buttonvalue =push/>
< / div>
< div id =success-message>< p> test< / p>< / div>
< / body>
< / html>
更新
我能够让这个工作使用下面的代码关闭时，从DOM中删除小部件。我觉得这是一个黑客，它是一个错误，或者我在做错了我的做法。如果没有人能告诉我我在做错什么，我会把我的解决方案作为答案。
$（'＃modal点击（function（）{
$（'＃success-message'）。对话框（{
modal：true，
按钮：{
OK：function （）{
$（this）.dialog（close）;
$（this）.dialog（'widget'）remove（）;
}
}
draggable：false，
title：'test modal'，
resizable：false，
zIndex：500
}）;
}）;
我能够通过删除使用下面的代码关闭DOM时的小部件。我觉得这是一个黑客，它是一个错误，或者我在做错了我的做法。如果没有人能告诉我我在做错什么，我会把我的解决方案作为答案。
$（'＃modal点击（function（）{
$（'＃success-message'）。对话框（{
modal：true，
按钮：{
OK：function （）{
$（this）.dialog（close）;
$（this）.dialog（'widget'）remove（）;
}
}
draggable：false，
title：'test modal'，
resizable：false，
zIndex：500
}）;
}）;
I have a need to show 2 dialog modals at once. Due to the contents of the first dialog needing to use some absolute positioning and z-indexing, the z-index of the overlay is important to me.
The problem I get is if I show a the first modal at z-index of 300, the overlay gets a z-index of 301. If I then show another modal with a z-index of 500, the new overlay gets a z-index of 501. If I close both of the modals and open the first modal again, instead of getting an overlay with z-index of 301, it is 503.
Here is some sample 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 I was able to get this to work by removing the widget from the DOM when closing using the code below. I feel like this is a hack and that it is either a bug or that I am doing something wrong in my approach. I'll post my solution as an answer if no one can tell me what I am doing wrong.
$('#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
});
});
I was able to get this to work by removing the widget from the DOM when closing using the code below. I feel like this is a hack and that it is either a bug or that I am doing something wrong in my approach. I'll post my solution as an answer if no one can tell me what I am doing wrong.
$('#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
});
});
这篇关于最后一个jQuery模态对话框z-index将覆盖初始模态z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
