覆蓋覆蓋JQuery UI 1.8.2對話框

我在也有對話框div中的primefaces組件的JSF頁面上使用jQuery UI模式對話框。當我將模態屬性設置爲true時，疊加層也會覆蓋對話框內容。這裏是我的對話框定義：覆蓋覆蓋JQuery UI 1.8.2對話框

if (jQuery("#rangeChoice").val() == 'Custom') {  
    jQuery("#rangeDialog").dialog({ 
    modal: true, 
    draggable: false, 
    minHeight: 375, minWidth: 450, 
    resizable: false, 
    title: 'Create Custom Date Range', 
    closeOnEscape: false, 
    open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); } 
    }); 
return; 
}

和我的DIV內容：

<div id="rangeDialog" style="display: none;"> 
<div class="customRangeButtons" style="z-index: 4999;"> 
    <!-- Clipped for brevity, the buttons alone are covered by the overlay --> 
    <span> 
     <p:commandButton value="Cancel" actionListener="#{bean.cancelCDR}" update="pGraphs"/> 
    </span> 
    <span style="margin-left: 300px;"> 
     <p:commandButton value="Submit" type="submit" action="#{bean.saveCDR()}" update="pGraphs"/> 
    </span> 
</div>

我使用Primefaces 2.2.1，和我有關於誰被控制的感覺覆蓋div。我曾嘗試在頁面中添加自己的覆蓋div，並在非模態對話框的打開事件中顯示它。它還涵蓋了z-index值大於3的對話框。雖然頁面上的一些其他控件高於此值，但值1和2仍然可以。請注意，這是使用p：對話框的一種解決方法，因爲它導致我的actionListener不能觸發。

我還能試試嗎？

來源

2011-08-04 Boiler Bill

問題是div標籤上的z-index被.dialog本身覆蓋。該.dialog的默認的z-index是1000你可以改變這個時候您可以通過更改zIndex選項像這樣創建對話框：

jQuery("#rangeDialog").dialog({ 
    modal: true, 
    draggable: false, 
    minHeight: 375, minWidth: 450, 
    resizable: false, 
    title: 'Create Custom Date Range', 
    closeOnEscape: false, 
    open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }, 
    zIndex: 4999 
    });

查看文檔中的選項標籤以獲得更多信息： http://jqueryui.com/demos/dialog/

來源

2011-08-04 20:13:47

我添加了zIndex選項，並得到了相同的結果。我繼續嘗試zIndex：32000，它仍然在覆蓋層之後。 -1的zIndex使覆蓋層完全不出現。 –

您是否也刪除了div上的樣式標籤？ –

我沒有。現在刪除了樣式，我得到了相同的結果。 –

覆蓋覆蓋JQuery UI 1.8.2對話框

回答

相關問題