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:
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=" OK "> <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. |