Наложение модального p: диалог с другим модальным p: диалог

Question

Первое - я новичок в 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

Edit:

Протестированный 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.

Answer 1

Я решил мою проблему, переопределив PrimeFaces CSS, который по какой-то причине не обрабатывал должным образом наложенные диалоговые окна (по сравнению с vanilla jQuery UI или Bootstrap) в версиях 5.x и 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;
}