覆盖JQuery UI 1.8.2对话框的覆盖 [英] Overlay covering up a JQuery UI 1.8.2 dialog
问题描述
我正在JSF页面上使用jQuery UI模态对话框,该对话框在div对话框中也具有primefaces组件.当我将modal属性设置为true时,覆盖层也会覆盖对话框内容.这是我的对话框定义:
I am using a jQuery UI modal dialog on a JSF page that also has primefaces components inside the dialog div. When I set the modal property to true the overlay covers up the dialog content as well. Here is my dialog definition:
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有一种感觉.我确实尝试在页面中添加自己的overlay div,并在非模式对话框的open事件中显示它.它还涵盖了z-index值> 3的对话框.尽管页面上的某些其他控件位于该值上方,但值1和2都可以.请注意,这是使用p:dialog的一种解决方法,因为它导致我的actionListeners无法启动.
I am using Primefaces 2.2.1, and I have a feeling related to who is controlling the overlay div. I did try adding my own overlay div in the page and showing it in the open event of a non modal dialog. It also covered the dialog for z-index values > 3. Values 1 and 2 were okay though some other controls on the page were above that. Note this is a workaround to using a p:dialog as it was causing my actionListeners not to fire.
我还能尝试什么?
推荐答案
问题是div标签上的z-index被 .dialog
本身覆盖. .dialog
的默认z-index是1000.您可以在创建对话框时通过更改 zIndex
选项来更改此设置,如下所示:
The problem is the z-index on the div tag is being overridden by the .dialog
itself. The .dialog
's default z-index is 1000. You can change this when you create the dialog by changing the zIndex
option like so:
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/
See the options tab in the documentation for more info: http://jqueryui.com/demos/dialog/
这篇关于覆盖JQuery UI 1.8.2对话框的覆盖的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!