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

This is a popup dialog with an inputfield.

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

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="large">` or `<tc:popup ... markup="small">`

A popup with markup `large`.

A popup with markup `small`.