Primefaces Dialog with Modal=True Not Working Properly

Primefaces dialog with modal=true not working properly

Per the Primefaces Guide 2.2 on the Dialog section:

appendToBody FALSE Boolean Appends dialog as a child of document body.

When using the Primefaces dialog utilize the appendToBody attribute to enable the dialog overlay to be found. The Primefaces dialog is based on the YUI dialog component which has a similar issue for modal dialog overlays.

Manipulating the dialog overlay will involve overriding the CSS class of the overlay and specifying your own opacity.

Modal dialog not working correctly

Can't check the solution life now, but the following looks suspicious:

When you check the rendered XHTML-code (e.g. through Firebug in Firefox), you might recognize that the form newResourceTypeForm is actually empty. With the appendTo="@body", I guess, the dialog panel is attached directly to thebody` - element, and through this is outside any formular. This prevents the buttons inside of work.

• Either move the form into the p:dialog, or
• try dropping appendTo
• try a rewrite appendTo="@form"

Hope one of that might help you go forward, and if - upvotes appreciated - ...

Dialog box does't get opened when clicked on p:commandLink in jsf primefaces?

Have a look at the PrimeFaces showcase: https://www.primefaces.org/showcase/ui/overlay/dialog/basic.xhtml

You update the dialog but you do not open it.

First of all your dialog needs a widgetVar property. Let’s say it's "myDialog".

Then in your commandLink you add a java script handler for oncomplete. There you open the dialog.

Like <p:commandLink ... oncomplete="PF('myDialog').show()" ... />

Overlay modal p:dialog with another modal p:dialog

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

Primefaces dialog overlay not working

I copied your code in my Primefaces project (Primefaces 4.0). The modal dialog have no issue. (I didn't used your code from <h:head /> because there were some errors and you don't need that code to trigger the modal).

Hint:
When you use an <p:dialog modal="true" /> without an "appendTo" attribute in a <p:layout /> component you will get an overlay issue (the overlay will come in front of the dialog panel).
I saw that Primefaces adds z-index: 0 to <p:layoutUnit /> so if you set the z-index to auto for .ui-layout-unit the overlay is displayed ok.

Hope this will help you.

---

Related Topics