Modal

Modal dialogs, or pop-up windows, are handy for prototyping and production. It focuses the user on the modal content. You can add images, links, and even a grid inside.

You can also manipulate the modal from JavaScript via the widgetVar name to open and close the modal.

Any button with class=close will close the modal when triggered.

modal.xhtml
Documentation

<t:modal title="Modal window" widgetVar="mymodal" id="mymodal">
    <p>Enter your name: <h:inputText value="#{modalController.name}"/></p>
    <a class="button success close">Save</a>
    <f:facet name="left"><a href="#" class="close">Close</a></f:facet>
    <f:facet name="right">Right</f:facet>
</t:modal>

<!-- Show modal with JavaScript by refering to the widgetVar -->
<a class="button" href="#" onclick="TW('mymodal').show()">Show modal</a>

<!-- Call server method to prepare data and show modal when AJAX call returns -->
<h:form>
    <t:commandButton
        onsuccess="TW('mymodal').show()"
        value="Server callback first"
        action="#{modalController.prepareData}"
        render=":mymodal"/>
</h:form>

Modal dialogs, or pop-up windows, are handy for prototyping and production. It focuses the user on the modal content. You can add images, links, and even a grid inside.

Info
Tag name modal
Component type io.tornadofaces.component.Modal
Renderer type io.tornadofaces.component.ModalRenderer
Attributes
NameDescriptionRequired
widgetVarWidget variable name, accessible via TW('widgetVar') and TornadoFaces.widgets.widgetVar. false
titleThe title of the modal window. If present, a title bar will be rendered at the top of the modal dialog.false
styleClassStyles to apply to the modal div.false
styleCSS Styles applied to the modal div.false
openSet open true if you want the modal to open immediately.false
closeButtonRender a default close button in the right upper corner. Defaults to true.false
closeOnOverlayClickClose modal when click on the overlay. Defaults to true.false
colorColor of the modal. Valid values are "primary", "dark" and none. Default "primary".
renderedShould this component be rendered?false
Client Side API

Widget: TornadoFaces.widget.Modal

Method Params Return type Description
show() void Show the modal dialog
hide() void Hide the modal dialog