Project Documentation


Tag name: <s:modalDialog>
UIComponent class: org.apache.myfaces.custom.dialog.ModalDialog
Tag class: org.apache.myfaces.custom.dialog.ModalDialogTag
Component type: org.apache.myfaces.ModalDialog
Component family: javax.faces.Panel
Renderer type: org.apache.myfaces.ModalDialog
Renderer class: org.apache.myfaces.custom.dialog.ModalDialogRenderer

Embeds into the current page a javascript object with methods which can be called to display (and hide) a modal popup window.

When the popup window is displayed, the current window contents become "greyed out" and the new window appears on top of the original. The original window does not respond to keys or clicks; only the new window can be accessed by the user. When the popup window is closed then the original window is again accessable.

When this component has a child facet named "titleBar" then the contents of that facet are rendered at the top of the popup window. This facet is intended to allow users to define their own custom window "decoration".

When this component has no "titleBar" facet, but does have a "dialogTitle" property, then a default window decoration is generated. It consists of a table row with two cells. The left cell contains the dialogTitle text. If property renderCloseButton is true, then the right cell holds a "close" icon. Styles are defined for the row and cells so that the look-and-feel can be customised.

The new window can optionally load a page from the server when it is displayed. If one of viewId or contentURL is defined, then an internal frame is inserted after the titleBar, and the specified contents is immediately loaded into the popup window when it is displayed.

The rest of the child components (ie other than titleBar) are displayed after the titlebar (and after the contents of viewId or contentURL if it is defined).

This component internally uses the Dojo modal window widget.


Name Type Supports EL? Description
binding String Only EL Identifies a backing bean property (of type UIComponent or appropriate subclass) to bind to this component instance. This value must be an EL expression.
closeButton Boolean Yes Specifies whether there should be a "close" icon to the right of the popup window title.

Ignored if there is a "titleBar" facet as a child, or dialogTitle is not defined.

Defaults to true.

contentURL String Yes The URL to show within the content area of the dialog.

This may be:

  • an absolute url ("http://..")
  • a url relative to the current webapp
  • a url relative to the current page
dialogAttr String Yes A space separated list with attribute='value' pairs, which control the behaviour of the dojo dialog.
dialogId String Yes An optional raw id to assign to the html div that encloses the modal dialog.

This id can be useful for controlling the dialog with javascript. However in most cases it is not necessary.

If this is property is not defined then an id will be automatically generated.

dialogTitle String Yes The title text to show in the title area of the popup window (ie the "window decoration").

Ignored if there is a "titleBar" facet as a child.

dialogVar String Yes Specifies the name of the javascript variable which provides access to the dialog functionality.

For example, if this is "myDialog" then a javascript object with name "myDialog" will be defined. This exposes the following methods:

  • will display the modal dialog window
  • myDialog.hide() will hide it (though this is not normally needed).
hiderIds String Yes A list of ids of components which, when activated, should cause the popup dialog to be hidden.

If the standard title-bar is displayed (ie no custom titleBar facet exists, and property dialogTitle is defined) then the standard close-button in that bar is automatically included.

If the child components of this component (which will appear in the popup) include other items that should cause the window to close (ie a button) then their ids should be defined via this property. This component will then automatically wire them up to the necessary functions to cause the popup to be closed when they are activated.

id String Yes An identifier for this particular component instance within a component view.

The id must be unique within the scope of the tag's enclosing NamingContainer (eg h:form or f:subview). The id is not necessarily unique across all components in the current view

This value must be a static value, ie not change over the lifetime of a component. It cannot be defined via an EL expression; only a string is permitted.

rendered boolean Yes A boolean value that indicates whether this component should be rendered. Default value: true.
style String Yes HTML: CSS styling instructions.
styleClass String Yes The CSS class for this element. Corresponds to the HTML 'class' attribute.

This value is also used as a base for defining style classes for parts of the standard window "title bar" decoration.

viewId String Yes The URL of the view to show within the content area of the dialog.

Optional; when not defined (or defined as an EL expression, but that expression returns null) then the popup dialog will be opened with no content. Presumably custom javascript in the calling page will arrange to populate the window content appropriately.

The modalDialog component treats this as a url relative to the webapp base. The value should not start with a slash.

Note that technically this value is not a viewId. A viewId is the internal path to the page definition (eg "foo.jsp" or "foo.xhtml"). What the browser accesses is a URL (which contains the path that triggers the facelets servlet, eg "foo.faces" or "foo.jsf" or "/faces/foo".

The valueIt should not start with a slash.
widgetId String Yes Optional enforced dojo widgetId
widgetVar String Yes An alias for the "dialogVar" property.