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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

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.


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business