6.8 Using Internet Explorer Modal/Modeless Windows
NN n/a, IE 4
Internet Explorer 4 and later (both Windows and Macintosh versions) provide a window object method that displays a true modal dialog window (preventing user access to the main window until the dialog window closes). IE 5 or later for Windows provides an additional choice that creates a modeless window, which always stays in front of the main window, but allows access to the main window's user interface elements. The methods are called window.showModalDialog( ) and window.showModelessDialog( ), respectively.
var dialogAnswer = window.showModalDialog("dialog.html", dialogArgs, "dialogWidth:300px; dialogHeight:201px; center:yes");
IE modal dialog windows do not maintain the same kind of live connection between main and dialog window as you use with full windows created via window.open( ). But the chord between main and dialog windows isn't entirely broken, either.
For example, a script in the main window can pass a reference to one of the main document's element objects to the showModalDialog( ) method; a script in the dialog window can then use the passed reference as a way to inspect a property of that object. Here is a simple example, starting with the main window that passes a reference to a form element to the modal dialog window:
The document in the dialog window can read the value of the main window's text box as needed:
A modeless dialog window behaves slightly differently from a scripting point of view. Most important, main document script processing does not stop when the modeless window appears. This is logical because a modeless window is intended to allow user interaction in both windows, while the dialog window simply stays in front of the main window. Second, the value returned by the showModelessDialog( ) method is a reference to the modeless dialog window. This allows scripts in the main window to communicate with the modeless dialog after it is created.
It's not uncommon for a call that invokes showModelessDialog( ) to pass either a reference to the main window or a reference to a main window function that needs to be invoked from the dialog window while it is still open (similar to the notion of an Apply button in many Windows system dialog boxes). Passing the main window reference looks like the following:
var dialogWind = window.showModelessDialog("myModeless.html", window, "dialogWidth:300px; dialogHeight:201px; center:yes");
A script in the dialog window's document can then use the value of window.dialogArguments as a starting point to any global variable, function, or element object in the main window's context:
var mainWind = window.dialogArguments; mainWind.document.body.style.backgroundColor = "lightyellow";
The window.returnValue property is not used in the modeless dialog. Communicate back to the main window directly. In fact, you can invoke main document functions from the modeless window. One way is to use the window reference passed to the dialogArguments property:
# in main window script window.showModelessDialog("myModeless.html", window, "..."); # in dialog window script var mainWind = window.dialogArguments; mainWind.myFunction( );
Or pass a reference to the main document function:
# in main window script window.showModelessDialog("myModeless.html", myFunction, "..."); # in dialog window script var mainFunc = window.dialogArguments; mainFunc( );
When you open either type of dialog window, the optional third parameter is a comma-delimited string of properties for the window. The syntax for this string is reminiscent of CSS name:property formatting, as shown in the previous examples. Table 6-2 lists the properties you can use and a description of their values.
As with any potentially intrusive user interface element, don't overuse the modal or modeless window.
6.8.4 See Also