覆盖覆盖JQuery UI 1.8.2对话框

Question

我在JSF页面上使用jQuery UI模式对话框,该对话框div中还有primefaces组件.当我将modal属性设置为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都没问题.请注意,这是使用ap:dialog的一种解决方法,因为它导致我的actionListeners不会触发.

我还能尝试什么？

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/