A popup dialog is created with `<tc:popup/>`. It can be filled with other components.

The popup dialog is based on the concept.

Tag Library Documentation: |

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.

Popup (AJAX) <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.

Popup (client side) <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"`

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

Modal

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