- Components
- Modal
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
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 |