Skip to main content link. Accesskey S


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.



  • 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).


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.


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.

January 2010: 1. used lotusForm2 class, div-based form for the dialog example. 2. Fixed the background, which was showing up as gray instead of white.

May 2010 - changed cancel links to be form buttons. An example of a dialog using the cancel link can still be found on the dojo widgets example page.

See also:

IBM, the IBM logo, 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