jQuery用戶界面1.10：對話框和zIndex選項

我必須做一個對話框apear當圖像onclick。問題是，我有一些真正的大Z指數（例如500），UI對話框是在這些元素的背面。jQuery用戶界面1.10：對話框和zIndex選項

這裏是頁面，你需要登錄，用戶：「raducup」，並通過：「1」。另一個問題是，當我點擊關閉對話框時，對象就會消失。

這是我打電話的時候，一個圖像的功能，請點擊：

function openItem(obiect){ 
    $(obiect).css('zIndex',9999); 
    $(obiect).dialog({ 
     dialogClass: "no-close", 
     modal: true, 
     draggable: true, 
     overlay: "background-color: red; opacity: 0.5", 
     buttons: [ 
      { 
       text: "OK", 
       click: function() { 
        $(this).dialog("close"); 
       } 
      } 
     ] 
    }); 
    reparaZindex(); 
}

來源

2013-06-04 raducup

只需在表格中添加'z-index：9999'就可以了。 –

你可以設置zIndex：'1000'選項到你的對話框定義並刪除$（obiect）.css（'zIndex'，9999）; ？ –

不工作，這是我沒有... – raducup

你不會告訴它，但你使用的是jQuery UI 1.10。

在jQuery的UI 1.10 zIndex選項去掉：

移除zIndex的選項

到堆棧選項類似，zIndex的選擇是不必要與正確堆疊實現。 z-index在CSS中定義，並且堆疊現在通過確保聚焦對話框是其父代中最後一個「堆疊」元素進行控制。

你必須使用純CSS設置「頂部」的對話框：

.ui-dialog { z-index: 1000 !important ;}

您需要的關鍵!important覆蓋元素的默認樣式;這會影響所有對話框，如果只需要爲對話框設置它，請使用dialogClass選項並對其進行設置。

如果你需要一個模式對話框中設置的選項modal: true看到docs：

如果設置爲true，對話框將有模態行爲; 上的其他項目將被禁用，即不能與之交互。 Modal 對話框會在對話框下方創建疊加層，但會在其他頁面元素上創建疊加層。

您需要設置模式疊加具有較高的z-index這樣做使用：

.ui-front { z-index: 1000 !important; }

這個元素了。

來源

2013-06-04 12:50:10

我確實使用了模態：true，但是僅適用於zindex 0的元素，如果它具有zindx 500，則模式選項不起作用 – raducup

樣式.ui-front也可以.ui-front {z-index：1000！important; }，因爲覆蓋默認使用z-index 100 –

+1 - 我在jQuery UI 1.10中更改爲z-index時發現了這個問題 – Alnitak

添加在你的CSS：

.ui-dialog { z-index: 1000 !important ;}

來源

2013-06-04 12:12:25 Rajiv007

沒有工作的第一件事... – raducup

你確定......我檢查了網頁，並沒有爲我工作。很抱歉，如果它沒有解決你的問題。也許你可以添加！重要的。 – Rajiv007

現在它適用！重要的，但一些元素仍然可以選擇（我需要一個模態用戶界面） – raducup

添加此之前調用對話框

$(obiect).css('zIndex',9999);

，並刪除

zIndex: 700,

from dialog

來源

2013-06-04 12:14:36

好的，謝謝，現在如何使對象不點擊後關閉（元素是圖像） – raducup

沒有工作，我更新了代碼，但仍然無法正常工作，檢查編碼。 – raducup

你可以使用'hide（）'功能來閱讀http://api.jquery.com/hide –

你可能想嘗試jQuery的對話框方法：

$(".selector").dialog("moveToTop");

參考：http://api.jqueryui.com/dialog/#method-moveToTop

來源

2014-05-31 02:51:59

唯一適合我的建議！謝謝！11 –

This！正是我需要管理多個堆疊的對話框。我在我的對話框中點擊處理程序鏈接到另一個。這使得「召回」和現有的對話變得很簡單，並且無需使用z索引即可將其移至前端。完善！ –

moveToTop是正確的方式。

的z-index是不正確的。它最初起作用，但多個對話框將繼續浮動在用z-index改變的對話框下面。不好。

來源

2014-08-15 05:39:22

有多種建議，在這裏，但據我所看到的jQuery UI的傢伙已經打破目前的對話控制。

我這麼說是因爲我有我的網頁上進行對話，其半透明和模態消隱格的背後是一些其他的元素。這不可能是正確的！

在基於一些其他職位最終我開發了這個全球性的解決方案，作爲一個擴展的對話窗口小部件。它適用於我，但我不確定如果我在對話中打開對話會怎麼做。

基本上它看起來一切在頁面上其他的zIndex的和移動的.ui小部件的覆蓋是一個更高，而對話本身要高於之一。

$.widget("ui.dialog", $.ui.dialog, 
{ 
    open: function() 
    { 
     var $dialog = $(this.element[0]); 

     var maxZ = 0; 
     $('*').each(function() 
     { 
      var thisZ = $(this).css('zIndex'); 
      thisZ = (thisZ === 'auto' ? (Number(maxZ) + 1) : thisZ); 
      if (thisZ > maxZ) maxZ = thisZ; 
     }); 

     $(".ui-widget-overlay").css("zIndex", (maxZ + 1)); 
     $dialog.parent().css("zIndex", (maxZ + 2)); 

     return this._super(); 
    } 
});

感謝以下，因爲這是我從如何做到這一點得到了信息： https://stackoverflow.com/a/20942857

http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

來源

2015-05-29 13:58:43 Morvael

添加zIndex屬性對話框對象：

$(elm).dialog(
zIndex: 10000 
);

來源

2015-07-07 23:40:46 TechieBrij

jQuery用戶界面1.10：對話框和zIndex選項

回答

相關問題