jquery-ui之覆盖 JQuery UI 1.8.2 对话框的叠加层

我在 JSF 页面上使用 jQuery UI 模式对话框，该页面的对话框 div 中也有 primefaces 组件。当我将模态属性设置为 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:dialog 的解决方法，因为它导致我的 actionListeners 不触发。

我还能尝试什么？

请您参考如下方法:

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