2011-08-04 221 views
3

我在也有對話框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不能觸發。

我還能試試嗎?

回答

5

問題是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/

+0

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

+1

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

+0

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