CODEWITHSUNDEEP
jsfprimefaces
JackTheKnife
JackTheKnife

Reputation: 4144

Overlay modal p:dialog with another modal p:dialog

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.

Upvotes: 1

Views: 2323

Answers (1)

JackTheKnife
JackTheKnife

Reputation: 4144

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

Upvotes: 1

Related Questions