2017-10-13 166 views
0

我想讓對話框出現在jQuery的對話框中。我遇到的問題是當頂部對話框打開時,z-indexes是錯誤的,所以具有類ui-widget-overlay的div出現在第一個對話框後面,而不是在第二個對話框後面。jQuery UI對話框z-index問題

這裏是Z-指標的細分:

我將把第一個對話框打開的對話框#1和在此之上的一個打開的對話框#2和UI窗口小部件的疊加爲ui-widget-overlay#1和ui-widget-overlay#2。

對話框#1被打開,並且其z索引被設置爲1以設置爲0的UI窗口小部件的覆蓋#1的z-index

對話框#2被打開和其z索引被設置爲1使用ui-widget-overlay#2 z-index設置爲0

然後,當我關閉對話框#2並重新打開它時,此時對話框#2 z-index被正確設置爲2,並且ui-widget-overlay# 2正確設置爲1

有沒有人有任何想法,爲什麼發生這種情況,是否有jquery-ui設置我缺少告訴它增加後續對話的z索引?

編輯: 我也想指出,我已經設置對話框選項stack:true,它已沒有什麼區別。

回答

0

我不得不使用一點黑客來按預期工作。

基本上我添加了一個事件時創建的模式,因此對話框初始化是一樣的東西:

dialogWindow.dialog({ 
     modal: true, 
     create: function(event, ui) { 
      dialogWindow.parent('.ui-dialog').css('zIndex', 2) 
       .nextAll('.ui-widget-overlay').css('zIndex', 1); 
     } 
    }); 

多虧了後下給我這個答案。

How to fix the zIndex issue with jQuery Dialog UI