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=true, even the dialog box overlay becomes inactive.

How can I make it work properly ?

This isn't very much information, did you try setting the attribute `appendToBody=true`? Try posting your code. — maple_shaft, Jun 20 '11 at 11:33
Thanks this works now, after setting `appendToBody="true"` ! — Rajat Gupta, Jun 20 '11 at 12:09
Is there any easier way to manipulate the opacity of the overlayed section ? You may consider posting this as an answer so that I can accept it. — Rajat Gupta, Jun 20 '11 at 12:15
check this http://stackoverflow.com/questions/18607921/primefaces-dialog-appendtobody-true-not-working — Abdulkader, Dec 21 '14 at 15:29

score 20 · Answer 1 · edited Sep 16 '16 at 07:39

20

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

edited Sep 16 '16 at 07:39

Jens Piegsa

7,399
5
58
106

answered Dec 12 '14 at 07:18

Abhishek Dhote

1,638
10
41
62

1

I was having trouble when using RequestContext#execute("PF('widgetvar').hide()"), my dialog was hiding as expected but the translucent overlay wouldn't. Code worked fine with PF 5.1 but broke with 5.2/5.3. This solution made things work well again (missed something in the docs for sure...). – jpangamarca Feb 17 '16 at 16:33
I'm sure this would work, however in my situation, my dialog is inside a form (and I have form fields inside the dialog), so I cant afford to move the dialog out to the body, without re-arranging my whole xhml. will continue looking for a solution, having upgraded from PF 4 to PF 5.3 – hendinas Mar 31 '16 at 22:12
@hendinas I fixed with appendTo="myForm" (where `myForm` is the id of the containing form). Apparently this was enough to move the dialog at the end of the form DOM instead of it being inside a `form`+`tabView`+`panelGrid` hierarchy which apparently broke the overlay handling of my `confirmDialog` upgrading from PF 7.0 to 8.0... – Mauro Molinari Sep 14 '22 at 08:31

score 12 · Accepted Answer · answered Jun 20 '11 at 13:00

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.

score 9 · Answer 3 · answered Jun 22 '11 at 21:26

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.

score 3 · Answer 4 · answered Nov 16 '11 at 14:48

3

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.

answered Nov 16 '11 at 14:48

Gunjan Kalra

437
5
10

2

Interestingly enough this is still the case, 5 or 6 years later.. You'd think they figured out a fix by now. – Wep0n Jun 27 '17 at 13:47

Primefaces dialog with modal=true not working properly

4 Answers4

Linked