最后一个jQuery模式对话框z-index会覆盖初始模式z-index
||
我需要一次显示2个对话框模态。由于第一个对话框的内容需要使用一些绝对定位和z索引，因此叠加层的z索引对我很重要。
我得到的问题是，如果我显示z索引为300的第一个模态，则叠加层的z索引为301。如果我然后显示z索引为500的另一个模态，则新的叠加层的z-索引为索引为501。如果我同时关闭了两个模态并再次打开第一个模态，则不会获得z-index为301的覆盖，而是503。
这是一些示例代码。
<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>
$(\'#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
});
});
没有找到相关结果
已邀请:
3 个回复
棠媳鳖
$(\'#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 }); });桔马牛
那可能对你有用磋判粗惊