我在 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 都可以，尽管页面上的一些其他控件高于该值。请注意，这是使用 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/ http://jqueryui.com/demos/dialog/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
