用另一个模态 p:dialog 覆盖模态 p:dialog答案

【问题标题】：Overlay modal p:dialog with another modal p:dialog用另一个模态 p:dialog 覆盖模态 p:dialog
【发布时间】：2019-06-11 17:16:49
【问题描述】：

首先 - 我是 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的元素。

【问题讨论】：

如果两者都有appendTo 怎么办？你的版本信息是什么？也许您应该将第二点的 appendTo 指向其他内容...
@Kukeltje v5.3 我在appendTo="@(#userDialog)" 之前做过，但也没有完成这项工作。我也试过confirmDialog，该选项在其他对话框上方显示对话框，但没有阻止覆盖。
所以您尝试了 PF 6.0、6.1、6.2 甚至 7.0 看看这是否适用于那里？只是为了看看......
@Kukeltje 这是一个旧应用程序，只是想添加更多组件。

标签： jsf primefaces

【解决方案1】：

我通过覆盖 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;
}

【讨论】：