用另一个模态p:dialog覆盖模态p:dialog [英] Overlay modal p:dialog with another modal p:dialog

问题描述

首先-我是PrimeFaces的新手，我试图在另一个已经生成的对话框顶部显示警告对话框.

First - I'm new to PrimeFaces and I'm trying to display a warning dialog on top of another already spawned dialog box.

查看代码看起来像(简化):

View code looks like (simplified):

    <p:dialog id="userDialog" header="User Account" widgetVar="userDialogView" modal="true" resizable="true" closable="fasle" showHeader="true" height="400" width="880px">
        <h:form id="dataDialogForm">
         ...
        </h:form>
    </p:dialog>

    <p:dialog id="warnDialog" header="Warning!" widgetVar="warnDialog" modal="true" appendTo="@(body)" height="300px" width="600px" resizable="false">
        <h:outputText value="You are trying to delete. Do you want to proceed? Yes/No" />
    </p:dialog>

和用于 warnDialog 生成它的控制器

RequestContext.getCurrentInstance().execute("showDialog('warnDialog')");

warnDialog 得到正确的生成，但显示在 userDialog 对话框下，而不是它的顶部.

warnDialog is getting spawned correctly but displayed under userDialog dialog instead on top of it.

应用正在使用PrimeFaces v6.0在PrimeFaces 6.0上运行的 org.primefaces.webapp.PostConstructApplicationEventListener.processEvent

App is using PrimeFaces v6.0 org.primefaces.webapp.PostConstructApplicationEventListener.processEvent Running on PrimeFaces 6.0

经过测试的 confirmDialog 代码(简化)如下:

Tested confirmDialog code (simplified) was like:

    <p:dialog id="userDialog" header="User Account" widgetVar="userDialogView" modal="true" resizable="true" closable="fasle" showHeader="true" height="400" width="880px">
        <h:form id="dataDialogForm">
         ...
        <p:confirmDialog widgetVar="warnDialog" header="Confirmation" severity="warn" modal="true" resizable="false" position="top,left">
                <f:facet name="message">
                    You are trying to delete. Do you want to proceed?
                </f:facet>
                <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="pi pi-check" />
                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="pi pi-times" />
            </p:confirmDialog>

        </h:form>
    </p:dialog>

那不是在 userDialog 上生成阻塞叠加层，也没有定位在视口的左上角，也没有定位在触发 confirmDialog 的元素上.

That one wasn't producing blocking overlay over userDialog neither wasn't positioning to the top left of the viewport rather than to the element which triggered confirmDialog.

推荐答案

我已经通过覆盖PrimeFaces CSS解决了我的问题，该CSS由于某些原因未能正确处理版本中的覆盖对话框(与普通jQuery UI或Bootstrap相比)5.x和6.x.

I have solved my problem by overriding PrimeFaces CSS, which for some reason wasn't handling properly overlaying dialog boxes (compared to vanilla jQuery UI or Bootstrap) in versions 5.x and 6.x.

我的解决方案如下:

<p:dialog id="userDialog" header="User Account" widgetVar="userDialogView" modal="true" resizable="true" closable="fasle" showHeader="true" height="400" width="880px">
    <h:form id="dataDialogForm">
     ...
    </h:form>
</p:dialog>

<p:dialog id="warnDialog" header="Warning!" widgetVar="warnDialog" modal="true" height="300px" width="600px" resizable="false" styleClass="dialogWarn-fix">
    <h:outputText value="You are trying to delete. Do you want to proceed? Yes/No" />
</p:dialog>

及其CSS:

.dialogWarn-fix {
    z-index: 9999 !important;
}

这篇关于用另一个模态p:dialog覆盖模态p:dialog的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！