Overlay modal p:dialog with another modal p:dialog

Question

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>

and controller for warnDialog to spawn it

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

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

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

Edit:

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>

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.

What if both have an `appendTo` And what it your version info? Maybe you should have the appendTo of the second point to something else... — Kukeltje, Jun 11 '19 at 17:31
@Kukeltje v5.3 and I have done before `appendTo="@(#userDialog)"` but didn't do the job either. Also I have tried `confirmDialog` and that option was displaying dialog box above other dialog box but w/o blocking overlay. — JackTheKnife, Jun 11 '19 at 17:44
So you tried PF 6.0, 6.1, 6.2 or even 7.0 to see if this works there? Just to see... — Kukeltje, Jun 11 '19 at 17:47
@Kukeltje this is an old application and just trying to add more components. — JackTheKnife, Jun 11 '19 at 17:48
@Kukeltje I gave got displayed dialog box over another one when second dialog box is nested in first but blocking overlay is not working when second dialog is spawned. — JackTheKnife, Jun 11 '19 at 18:04
I understand, but I'm not spending time on an issue in an old version of PrimeFaces if it is unknown if this specific issue also fails in a newer (newest) version. Upgrading libraries (or staying a recent versions) is something that is always good to do. — Kukeltje, Jun 11 '19 at 18:48
@Kukeltje Understand. One more questions before upgrading PF - how to use `appendTo` with an element ID instead html tag? — JackTheKnife, Jun 11 '19 at 18:51
effectively that is a new question... But I'd expect `@(#)` to work, take not of the **full**... See https://stackoverflow.com/questions/6045307/how-can-i-know-the-id-of-a-jsf-component-so-i-can-use-in-javascript — Kukeltje, Jun 11 '19 at 19:00
@Kukeltje AppendTo kills first dialog box which second is appended to. And yes - I have checked `confirmDialog` which I have stated before not creating blocking overlay when `modal=true` as well is positioning to the element which will trigger it instead of the viewport. — JackTheKnife, Jun 11 '19 at 19:16
@Kukeltje Upgraded PF to 6.0 - still the same problem for both cases. — JackTheKnife, Jun 11 '19 at 19:40
@Kukeltje 6.2 - not able to display dialog `id="warnDialog` unless is not nested inside `userDialog` and `appendTo` it. Still no blocking overlay. 7.0 broke whole application. At least can you tell me how to force using my CSS instead of PF so I can change z-index and set correct position on my own as PF 5.x and 6.x has problems to handle it. — JackTheKnife, Jun 11 '19 at 21:06

score 1 · Accepted Answer · answered Jun 11 '19 at 23:27

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.

My solution looks 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">
     ...
    </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>

and CSS for it:

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

Overlay modal p:dialog with another modal p:dialog

1 Answers1

Linked