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>