To create a client side popup, use omit="true" for buttons and
set collapsedMode="hidden" for the popup.
The popup will be alread rendered on the page and is shown/hidden via CSS.
Be aware that elements only hidden by CSS are still validated! For example, a required input field in a
hidden client side popup will be checked after submit.
You have also to consider that the shown/hidden state is not given to the server.
<tc:button label="Open client side popup" omit="true">
<tc:operation name="show" for="clientPopup"/>
</tc:button>
<tc:popup id="clientPopup" collapsedMode="hidden">
<f:facet name="label">Popup (client side)</f:facet>
<f:facet name="bar">
<tc:link image="bi-x-lg" omit="true">
<tc:operation name="hide" for="clientPopup"/>
</tc:link>
</f:facet>
<tc:panel id="clientPopupContent">
<tc:messages/>
<tc:in label="Input" value="#{popupController.popupClient}" required="true"/>
<tc:out label="Output" value="#{popupController.popupClient}"/>
</tc:panel>
<f:facet name="footer">
<tc:button label="Submit">
<f:ajax execute="clientPopupContent" render="clientPopupContent"/>
</tc:button>
<tc:button label="Close" omit="true">
<tc:operation name="hide" for="clientPopup"/>
</tc:button>
</f:facet>
</tc:popup>