最後一個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

回答

相關問題