时间戳

首页 > 解决方案 > 用另一个模态 p:dialog 覆盖模态 p:dialog

jsf - 用另一个模态 p:dialog 覆盖模态 p:dialog

问题描述

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

查看代码看起来像（简化）：

    <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对话框下而不是在其顶部。

应用正在使用 PrimeFaces v6.0 org.primefaces.webapp.PostConstructApplicationEventListener.processEvent Running on PrimeFaces 6.0

编辑：

测试confirmDialog代码（简化）如下：

    <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。

标签： jsfprimefaces

解决方案

我通过覆盖 PrimeFaces CSS 解决了我的问题，由于某种原因，它在 5.x 和 6.x 版本中没有正确处理覆盖对话框（与普通 jQuery UI 或 Bootstrap 相比）。

我的解决方案如下所示：

<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;
}

推荐阅读