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

To create a client side popup you have to know about `collapsedMode`. The mode indicated whether a collapsed popup should be rendered. If `collapsedMode="absent"`, which is default, a hidden popup dialog will no be rendered. If `collapsedMode="hidden"`, a hidden popup dialog will be rendered on the page, but hidden by CSS.

Be careful with validations. For example, hidden required input fields will be validated after submit.

So to create the popup, use `<tc:popup collapsedMode="hidden">`. The attribute `collapsed="true"` is default, because the popup should normally not be opened after loading the page. The hidden popup must be already rendered, so the client don't have to send any requests to the server.

Client side opening and closing can be done with the `<tc:operation name="show|hide" for="[ID]"/>` tag. The attribute `name` must be set and can have the value 'show' and 'hide' which is to show and hide the popup, obviously. The other mandatory attribute is the `for` attribute. It contain the ID of the popup on which the transition should be executed.

<tc:button label="Open" omit="true"> <tc:operation name="show" for="clientPopup"/> </tc:button> Client Side Popup

This is a popup dialog with an input field.

Submit <tc:button label="Submit"> <f:ajax execute="in" render="in :::out clientPopupMessages"/> </tc:button>

The 'Submit'-button send an ajax request to submit the value in the input field.

Submit & Close <tc:button label="Submit & Close"> <tc:operation name="hide" for="clientPopup"/> </tc:button>

The 'Submit & Close'-button execute a submit and run the operation 'hide' to close the popup.

Cancel <tc:button label="Cancel" omit="true"> <tc:operation name="hide" for="clientPopup"/> </tc:button>

The 'Cancel'-button execute a 'hide'-operation to close the popup. Also the attribute `omit="true"` is set to prevent submit.

The width of the popups can be changed by markups.

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

A popup with markup `extraLarge`.

A popup with markup `large`.

A popup with markup `small`.

! missing content Simple Popup loaded by AJAX.

The content of the popup will be refreshed with AJAX after opening the popup. The refresh method waits two seconds before execution.

tbd (to be defined)! in this example the "show" should be called directly, and not after the ajax call is complete. On the other and, to avoid flickering, the popup should be shown after the ajax call. ()