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