Dialog

Tabbed Dialog

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).
• lotusDialogHeader - Assigned to a header/div tag that wraps the header text and close icon.
• lotusHeading - Assigned to the heading element that sits in the lotusDialogHeader.
• lotusDialogClose - Assigned to the close icon that sits in the lotusDialogHeader.
• 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 to scroll if it gets too big.

Basic Implementation

Either create a Dojo dialog widget div, or a div with class of lotusDialogWrapper set to display:none. You can override default heights and widths on this div.

The width of the dialog shrinkwraps to the content in all modern browsers. IE6 (all languages) and IE7 (right-to-left languages) both require a width for proper rendering of the dialog and it is assigned to 500px in the CSS on the lotusDialogWrapper div for just these browsers/modes. You can override this default, but if you do it on the dialog itself, it will no longer shrinkwrap in the better browsers. You will need to set a width on a dialog whose content stretches the width of it's container (like a tag cloud) or the dialog will stretch the width of the browser.

Create a wrapping div with class=lotusDialogBorder.

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

Create your dialog header using an html5 header tag or div assigned the class lotusDialogHeader. The heading element with class lotusHeading and the close image go in the header div. The header text is wrapped in an h1 element.

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

The sample dialog on this page contains a form but does not implement the error handling piece. See the forms component for error handling code.

Variations

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. (Note, you only need this for a modal dialog.)

Accessibility

Put role="dialog" on the outermost div

Dialog Title:

• If your dialog has a visible title, use the aria-labelledby property on the outermost div to point to the h1 element that contains the title
• If your dialog doesn't have a visible title, add one using the aria-label property on the outermost div
• Use an h1 tag for your dialog title

For the dialog content follow the rules for forms, assuming you won't have a form title because your dialog supplies the title.

High-level keyboard interaction:

• Enter submits the form and closes the dialog
• Escape closes the dialog without submitting the form
• F6 is the recommended key to move focus between the application and an open non-modal dialog.
• A modal dialog retains keyboard focus until it is submitted and/or closed, with focus cycling back to the top of the content once it reaches the end

There are a few different dialog design patterns in the WAI-ARIA 1.0 Authoring Practices guide. Please see the relevant one for more information on how to make your specific dialog accessible.

• Dialog (Modal): the general pattern for a modal dialog
• Alert or Message Dialog: a modal dialog whose primary purpose is communicating a message and acquiring a user response to that message
• Dialog (Non-Modal): the general pattern for a non-modal dialog
• The Dialog (Tooltip) and Popup Help design patterns both apply to the Popup component, so please don't use them for this general dialog component.

Examples

• All tags popup (click on view: all in the tags section, left column)

Sample HTML

Sample HTML - tabbed dialog

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.

September 2010 - accessibility fixes surrounding the header including a new lotusDialogHeader div, moving the close icon out of the h1 or h2 heading tag, and styling using the lotusHeading class rather than the specific h1/h2 tags.

January 2011: added accessibilty documentation.

February 9, 2011: removed the styling to automatically hide the component using top:-9999px. This wasn't hiding the component for screen reader users.

March 16, 2011: removed the min and max width on the dialog so it shrinkwraps to the content. Added a width to the CSS for IE6 and IE7 (RTL only).

April 21, 2011: changed the markup structure for the close icon. Because the lotusClose definition uses opacity and because the new close icon has partial transparency, opacity can't be completely overwritten to the default value in older IE browsers.

November 4, 2011: added the tabbed dialog example that uses styles from the dijit theme (dijit dialog and tab container).

January 27, 2011: added support for closable tabs, tab slider, and tab menu in the tabbed dialog.

February 15, 2012: updated accessibility section.