Primefaces dialog with modal=true not working properly

Question

I am unable to achieve a (primefaces)dialog box with attribute modal=true. It works correctly with modal=false, but when I try to set modal=t

Answer 1

With Primefaces 5 appendTo="@(body)" fixed the issue for me.

Answer 2

I have also struggled with strange behaviour until I moved the p:dialog into a separate h:form at which point the data in the dialog matched the row from the dataTable but the overlay was not hiding.

appendToBody=true solved the problem with the overlay. I still need to test dialogs with inputs and actions.

Answer 3

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.

Answer 4

appendToBody=true causes the problems associated with nested forms - the input texts values as entered at the dialog are ignore and ajax requests do not go through until the dialog gets its own non-nested form. Even without modal=true the appentToBody=true causes this behavior.