CODEWITHSUNDEEP
javascriptprimefacesdialogmodal-dialogclient-side
psartini
psartini

Reputation: 161

Change PrimeFaces dialog to be modal on client side

I have a primefaces dialog like this:

<p:dialog widgetVar="dlg" width="320" height="220" modal="false" closable="false" showHeader="false" resizable="false" position="right,top">

If I click on some element in my page I want to change this dialog to be modal. Is there a client side API for this?

Tried 

onclick="dlg.setModal(true);"

with no success. Method setModal() does not exist. Is it possible to change a dialog this way without roundtrip to the server?

Upvotes: 0

Views: 612

Answers (2)

Antares42
Antares42

Reputation: 1436

Do you use Firefox with Firebug or some other browser / web developer tool that can show you the DOM element dlg?

There you can find that dlg has the methods show() and hide(), as well as enableModality()and disableModality(). These are (almost) what you want.

Unfortunately, enable... and disable don't (as one might think) set an option that makes the dialog become modal when shown. Rather they show or hide the "blackout" div. So when you want a dynamically modal dialog, instead of calling dlg.show() via Javascript, call dlg.enableModality(); dlg.show(), and vice versa for hiding.

Edit:

There is also the property dlg.cfg which contains some settings. It appears that if you simply set dlg.cfg.modal=true (whether that setting exists at the time or not), then the next time dlg is shown, it's modal (but, unlike setting it in your xhtml, it will still be draggable and resizable).

Upvotes: 0

Max
Max

Reputation: 145

You have attribute for this (modal) now it false set it madal="true"

Upvotes: 0

Related Questions