Popup

The following example shows a popup that contains a required input field. Popups are opened and closed via the <tc:operation name="show|hide" for="[ID]"/> tag. When used with AJAX, the component must be rendered and executed in order to transfer the new operation value. In this example, the <tc:message> tag of the page is also rendered to show possible errors.

The example will work as well if the <f:ajax> tags are removed.

Open AJAX popup

Popup (AJAX)

Submit Submit & Close Cancel

<tc:button label="Open AJAX popup"> <f:ajax execute="ajaxPopup" render="ajaxPopup :page:messages"/> <tc:operation name="show" for="ajaxPopup"/> </tc:button> <tc:popup id="ajaxPopup"> <f:facet name="label">Popup (AJAX)</f:facet> <f:facet name="bar"> <tc:link image="bi-x-lg" immediate="true"> <f:ajax execute="ajaxPopup" render="ajaxPopup :page:messages"/> <tc:operation name="hide" for="ajaxPopup"/> </tc:link> </f:facet> <tc:panel id="ajaxPopupContent"> <tc:messages/> <tc:in label="Input" value="#{popupController.popupAjax}" required="true"/> <tc:out label="Output" value="#{popupController.popupAjax}"/> </tc:panel> <f:facet name="footer"> <tc:button label="Submit"> <f:ajax execute="ajaxPopup" render="ajaxPopupContent :page:messages"/> </tc:button> <tc:button label="Submit & Close"> <f:ajax execute="ajaxPopup" render="ajaxPopup :page:messages"/> <tc:operation name="hide" for="ajaxPopup"/> </tc:button> <tc:button label="Cancel" immediate="true"> <f:ajax execute="ajaxPopup" render="ajaxPopup :page:messages"/> <tc:operation name="hide" for="ajaxPopup"/> </tc:button> </f:facet> </tc:popup>

To create a client side popup, use omit="true" for buttons and set collapsedMode="hidden" for the popup. The popup will be already 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.

Open client side popup

Popup (client side)

Input Output

Submit Close

<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>

The width of the popups can be changed by markups.

<tc:popup ... markup="extraLarge"> or "large" or "small"

Open

Extra Large Popup Large Popup Small Popup

Popup (extra large)

A popup with markup extraLarge.

Popup (large)

A popup with markup large.

Popup (small)

A popup with markup small.

By default the popup can be closed by clicking on the backdrop. To prevent this, set modal="true". The default value can be configured in the tobago-config.xml.

Open modal Popup

Modal

This popup can only be closed by clicking on the X button.