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.

Show modal

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

Name	Description	Required
widgetVar	Widget variable name, accessible via TW('widgetVar') and TornadoFaces.widgets.widgetVar.	false
title	The title of the modal window. If present, a title bar will be rendered at the top of the modal dialog.	false
styleClass	Styles to apply to the modal div.	false
style	CSS Styles applied to the modal div.	false
open	Set open true if you want the modal to open immediately.	false
closeButton	Render a default close button in the right upper corner. Defaults to true.	false
closeOnOverlayClick	Close modal when click on the overlay. Defaults to true.	false
color	Color of the modal. Valid values are "primary", "dark" and none. Default "primary".
rendered	Should 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