Primefaces dialog with modal=true not working properly Primefaces dialog with modal=true not working properly javascript javascript

Primefaces dialog with modal=true not working properly


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


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.


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.