覆盖覆盖JQuery UI 1.8.2对话框

Question

我在也有对话框div中的primefaces组件的JSF页面上使用jQuery UI模式对话框。当我将模态属性设置为true时，叠加层也会覆盖对话框内容。这里是我的对话框定义：

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不能触发。

我还能试试吗？

Answer 1

问题是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/