June 6, 2000 - Creating Modal and Modeless Dialogs | WebReference

June 6, 2000 - Creating Modal and Modeless Dialogs

Yehuda Shiran June 6, 2000
Creating Modal and Modeless Dialogs
Tips: June 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

JavaScript features several built-in dialog boxes: window.alert(), window.confirm(), and window.prompt(). When a dialog box pops up, the user cannot focus on the original page until the box is terminated. In other words, a dialog box is always focused. Internet Explorer supports a few methods that enable you to apply this feature to any new window:

showModalDialog() (Internet Explorer 4 and above)
showModelessDialog() (Internet Explorer 5 and above)
Here's the syntax for these methods:

vReturnValue = window.showModalDialog(sURL[, vArguments][, sFeatures]);
vReturnValue = window.showModelessDialog(sURL[, vArguments][, sFeatures]);
The first argument is a string that specifies the URL of the document to load and display in the new window. The second argument, vArguments, is a variant that specifies the arguments to use when displaying the document. 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 third argument, sFeatures, is a string that specifies the window ornaments for the dialog box, using one or more of the following semicolon-delimited values:

dialogHeight: iHeight
Sets the height of the dialog window. Although a user can manually adjust the height of a dialog box to a smaller value (provided the dialog box is resizable), the minimum
dialogHeight you can specify is 100 pixels. Note that the default unit of measure for dialogHeight and dialogWidth in Internet Explorer 4.0 is the "em," whereas in Internet Explorer 5 it is the "px" (pixel). For consistent results, specify the dialogHeight and dialogWidth in pixels when designing modal dialog boxes.
dialogWidth: iWidth
Sets the width of the dialog window.
dialogLeft: iXPos
Sets the left position of the dialog window relative to the upper-left corner of the desktop.
dialogTop: iYPos
Sets the top position of the dialog window relative to the upper-left corner of the desktop.
center: {yes | no | 1 | 0 }
Specifies whether to center the dialog window within the desktop. The default is "
yes." To override center, even though the default for center is "yes," you can specify either dialogLeft and/or dialogTop.
help: {yes | no | 1 | 0 }
Specifies whether the dialog window displays the context-sensitive Help icon. The default is "
yes."
resizable: {yes | no | 1 | 0 } (Internet Explorer 5 and above)
Specifies whether the dialog window has set dimensions. The default for both trusted and untrusted dialog windows is "
no."
status: {yes | no | 1 | 0 } (Internet Explorer 5 and above)
Specifies whether the dialog window displays a status bar. The default is "
yes" for untrusted dialog windows and "no" for trusted dialog windows.
Learn more about manipulating windows in Tutorial 1, Working with Windows.