Auto-Opening the Dialog (^) ❘ 409
In the preceding script, you turn on the modal option by setting it to true. When you set the modal
option to true along with the application of the div.ui-widget-overlay CSS rule, you disable inter-
action with background content while the dialog is open. Interaction with background content is
disabled because the
element with the ui-widget-overlay class name is added dynamically to
the document when the modal option is enabled. This element then blocks access to background con-
tent because it is positioned to take up the entire window and is positioned in front of background
content, but behind the open dialog.
Figure 17-3 shows that the background is draped in a semitransparent white background to indicate
that it is disabled.
the document when the modal option is enabled. This element then blocks access to background con-
tent because it is positioned to take up the entire window and is positioned in front of background
content, but behind the open dialog.
Figure 17-3 shows that the background is draped in a semitransparent white background to indicate
that it is disabled.
FIGURE 17-3
Auto-Opening the Dialog
By default, upon calling the dialog() method, the dialog is automatically opened. This behavior can
be controlled by setting the autoOpen option to false. When the autoOpen option is set to false, you
can programmatically open a dialog by calling the dialog() method with the string 'open' in its fi rst
argument or dialog('open'). Likewise, dialog('close') can be used to close the dialog.Example 17-5 demonstrates the autoOpen option:
<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Dialog Plugin</title>
<script src='../jQuery.js'></script>