Dialog Boxes | Inside JavaScript

In the Internet Explorer, you can use the showModalDialog to display modal dialog boxes (dialog boxes the user must dismiss before continuing with the browser) and showModelessDialog to display modeless dialog boxes (dialog boxes that enable the user to return to the browser before being dismissed) with showModalDialog . Here's how to use these two methods :

 window.showModalDialog(  URL  [,  arguments  ] [,  features  ])  window.showModelessDialog(  URL  [,  arguments  ] [,  features  ])

The URL argument specifies the URL of the document to load and display.

The arguments argument specifies the arguments to use when displaying the dialog box. Use this parameter to pass a value of any type, including an array of values. The dialog box can extract the values passed by the caller from the dialogArguments property of the window object.

The features argument specifies how to configure the dialog box, using one or more of the following semicolon-delimited valuesall these values can be set to Boolean values you can set to "yes," "no," 1 (same as yes), or 0 (same as no) unless otherwise noted:

dialogHeight . Sets the height of the dialog window. Set to a value in pixels ending in px , such as "250px" .
dialogLeft . Sets the left position of the dialog window relative to the upper-left corner of the desktop. Set to a value in pixels ending in px , such as "250px" .
dialogTop . Sets the top position of the dialog window relative to the upper-left corner of the desktop. Set to a value in pixels ending in px , such as "250px" .
dialogWidth . Sets the width of the dialog window. Set to a value in pixels ending in px , such as "250px" .
center . Specifies whether to center the dialog window in the screen. The default is "yes" .
dialogHide . Specifies whether the dialog window is hidden when printing or using print preview. The default is "no" .
edge . Specifies the edge style of the dialog window. Set to "sunken" or "raised" . The default is "raised" .
help . Specifies whether the dialog window displays a context-sensitive Help icon. The default is "yes" .
resizable . Specifies whether the dialog window may be resized. The default is "no" .
scroll . Specifies whether the dialog window displays scrollbars. The default is "yes" .
status . Specifies whether the dialog window displays a status bar. The default is "yes" for untrusted dialog windows and "no" for Internet Explorer trusted dialog windows.
unadorned . Specifies whether the dialog window displays the border elements. This feature is available only when a dialog box is opened from an Internet Explorer trusted application. The default is "no" .

You set these values with a colon and the value itself; for example, here's how we created a dialog box 350 pixels wide and 250 pixels high in Chapter 7:

 var dialog1 = showModalDialog("07-04.html", values, "dialogWidth:350px;  dialogHeight:250px")

We've already seen how to use these methods in Chapter 7. In that chapter, we used showModalDialog to display a modal dialog box. In that example, the main window displayed two values in text fields; when the user opened the dialog box, those values were passed to and displayed in that dialog box. The user could enter new values, close the dialog box, and the new values would appear in the main window. Here is the code we used for the main window:

(Listing 07-03.html on the web site)

 <HTML>      <HEAD>          <TITLE>Using Modal Dialogs</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function openDialog()              {                  var values = new Array()                  if(document.form1.text1.value){                      values["value1"] = document.form1.text1.value                  }                  if(document.form1.text2.value){                      values["value2"] = document.form1.text2.value                  }                  var dialog1 = showModalDialog("07-04.html", values,                      "dialogWidth:350px; dialogHeight:250px")                  if (dialog1) {                      if (dialog1["value1"]) {                          document.form1.text1.value = dialog1["value1"]                      }                      if (dialog1["value2"]) {                          document.form1.text2.value = dialog1["value2"]                      }                  }              }              // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using Modal Dialogs</H1>          <FORM NAME="form1">              <INPUT TYPE="BUTTON" ONCLICK="openDialog()" VALUE="Open the dialog box">              <BR>              Enter the first value:              <BR>              <INPUT TYPE="TEXT" ID="text1" VALUE="1">              <BR>              Enter the second value:              <BR>              <INPUT TYPE="TEXT" ID="text2" VALUE="2">              <BR>          </FORM>      </BODY>  </HTML>

And here's the code for the dialog box (Listing 07-04.html on the web site):

 <HTML>      <HEAD>          <TITLE>Modal Dialog Box</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function handleOK()              {                  var returnValues = new Array()                  if (document.form1.text1.value) {                      returnValues["value1"] = document.form1.text1.value                  }                  if (document.form1.text2.value) {                      returnValues["value2"] = document.form1.text2.value                  }                  window.returnValue = returnValues                  window.close()              }              function handleCancel()              {                  window.returnValue = ""                  window.close()              }              function initialize()              {                  if (window.dialogArguments) {                      if (window.dialogArguments["value1"]) {                          document.form1.text1.value = window.dialogArguments["value1"]                      }                      if (window.dialogArguments["value2"]) {                          document.form1.text2.value = window.dialogArguments["value2"]                      }                  }              }              // -->          </SCRIPT>      </HEAD>       <BODY ONLOAD="initialize()">          <H1>Modal Dialog Box</H1>          <FORM NAME="form1">              Enter the new first value:              <BR>              <INPUT TYPE="TEXT" NAME="text1">              <BR>              Enter the new second value:              <BR>              <INPUT TYPE="TEXT" NAME="text2">              <BR>              <INPUT TYPE="BUTTON" ONCLICK="handleOK()" VALUE="&nbsp;&nbsp;OK&nbsp;&nbsp;">              <INPUT TYPE="BUTTON" ONCLICK="handleCancel()" VALUE="Cancel">          </FORM>      </BODY>  </HTML>

You can see the results of this code in Figures 7.3 and 7.4. For all the details, see Chapter 7.