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值的对话框＆gt; 3.虽然页面上的其他一些控件高于此值，但值1和2都没问题。请注意，这是使用p：对话框的一种解决方法，因为它导致我的actionListeners不会触发。

我还能尝试什么？

Answer 1

问题是.dialog本身正在覆盖div标签上的z-index。 .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/

覆盖覆盖JQuery UI 1.8.2对话框

1 个答案: