最后一个jQuery模态对话框z-index覆盖初始模态z-index

我需要一次显示2个对话框模式。由于第一个对话框的内容需要使用某种绝对定位和z索引，所以叠加的z-index对我很重要。最后一个jQuery模态对话框z-index覆盖初始模态z-index

我得到的问题是，如果我在z-index为300时显示第一个模态，则叠加的z-索引为301.如果我然后显示另一个z-index为500的模态，则新的叠加获得501的Z-索引。如果我关闭两个模态并再次打开第一个模态，而不是获得具有301的Z-索引的叠加，则它是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>

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 
    });  
});

来源

2011-06-15 Adam Carr

在使用下面的代码关闭代码时，我能够通过从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 
    });  
});

来源

2011-06-16 14:42:43

尝试 “堆栈” 选项设置为false：

'stack: false'

这可能会为你

来源

2012-05-26 11:27:14 narhe

谢谢，这对我有用！ – thomaux 2013-07-12 14:08:42

我跑过这篇文章，试图弄清楚如何在Modal Popup Extender对话框的顶部显示jQuery UI对话框，该对话框不断关注点击。添加这个诀窍！ – lambinator 2013-12-28 01:24:00

工作 '栈：假' 为我工作。

它似乎将它设置为false会阻止对话框重新计算它的z-index，当它打开或点击或者其他任何东西时。

来源

2013-02-28 12:05:49 chris86brown

最后一个jQuery模态对话框z-index覆盖初始模态z-index

回答

相关问题