Skip to main content link. Accesskey S

Dialog

A dialog appears on top of the UI in response to a user action. It "disables" the UI until the user interacts and/or dismisses the dialog.

A dialog can be wrapped in a dojo dialog widget to get some dialog behavior for free. It can also be used independently of dojo.

Sprites: Directionality:

Classes

  • lotusDialogWrapper - the outside wrapper, which is assigned a unique id. This is needed when you are not creating a dojo dialog, where the id is assigned to the widget.
  • lotusDialogBorder - this class is purely to allow flexibility in styling.
  • lotusDialog - assigned to either a wrapping div or a form (along with the lotusForm class, if using a form).
  • lotusDialogContent - A header tag is used for the dialog header. This class, assigned to a div, wraps the rest of the dialog content and is set up to scroll if it gets too big.

Basic Implementation

Either create a dojo dialog widget div, or a div with class of lotusDialogWrapper. You can override default heights and widths on this div.

Create a wrapping div with class=lotusDialogBorder.

Assign the lotusDialog class to a div or form inside the wrapper div.

Create your dialog header. The close image goes in the header.

Create a wrapper div for the rest of the content (lotusDialogContent).

Variations

Use an h1 tag for a fancier header (background color, etc.) or an h2 tag for a simpler header (just header text).

If not using a dojo dialog, you will need to create a div with a class of lotusOverlay that appears in the code before the dialog and uses javascript to position and size it.

Examples

Sample HTML

CSS (dialogs.css)

Theme CSS (dialogsTheme.css)

This component began as a simpler dialog with a blue border. It now has a border similar to that of a help popup. This required adding an additional wrapping div.

The component was adjusted to be used as a dojo dialog widget. In this case, the dojo dialog is just being used as a wrapper for our component. We don't use the built-in dojo dialog title. Creating our own dialog header and scrolling content allows us to use the same dialog with our without dojo.

See also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.