-This is a default dialog which opens in a floating layer above the page content protected with an iframe. -It is created by simply calling .dialog on the dialog content element, like this: -
- -$("#dialog").dialog();
--A basic dialog window has a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default. -
+The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.
-This is a simple modal dialog with a semi-transparent overlay layer added as an option to dim out the page content behind it and bring the user's attention to the dialog. -A modal dialog prevents the user from interacting with the rest of the page until it is closed. -
- --The dialog window can be moved, resized and closed with the 'x' icon. -
+A modal dialog prevents the user from interacting with the rest of the page until it is closed. To add a semi-transparent layer that dims out the page content behind the dialog, set the background color and opacity of the overlay option.
-This type of dialog adds a button bar and is useful for confirming an action that may be destructive or important. -These are typically displayed as modal dialogs to get the user's attention and force a decision before continuing. -This example uses an icon from the css sprite set and is set to be not resizable by setting the resizable option to false. -
+Confirm an action that may be destructive or important. Set the modal option to true, and specify primary and secondary user actions with the buttons option.
-This is an example of how a dialog can be used for data entry by making it larger and embedding a form into the content area. -A multi-step wizard could be created by extending this with a step navigation and forward and back buttons. -
+Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.
-A modal message dialog like this is useful for providing information to the user that requires them to explicitly acknowledge before continuing with their work. -
- --This example adds a button bar with a single 'Ok' button to dismiss the dialog. -
+Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the modal option to true, and specify a primary action (Ok) with the buttons option.