Dialog - Basic

Dialog visibility is managed by using show() and hide() methods of the client side api.

Basic Dialog
Resistance to PrimeFaces is futile!
Modal Dialog
This is a Modal Dialog.
This dialog has nice effects.
<h:panelGrid columns="1" cellpadding="5">
    <p:commandButton value="Basic" type="button" onclick="PF('dlg1').show();" />
    <p:commandButton value="Modal" type="button" onclick="PF('dlg2').show();" />
    <p:commandButton value="Effects" type="button" onclick="PF('dlg3').show();" /> 
<p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40">
    <h:outputText value="Resistance to PrimeFaces is futile!" />

<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="100">
    <h:outputText value="This is a Modal Dialog." />

<p:dialog header="Effects" widgetVar="dlg3" showEffect="explode" hideEffect="bounce" height="100">
    <h:outputText value="This dialog has nice effects." />


Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega


Create awesome applications in no time using the premium templates and impress your users.