Average Rating: 5/5 | Rate this item | 1 user has rated this item.

Expertise: Advanced
Language: Web

August 14, 2000

Using Web Dialogs in IE

Opening a new browser window is a handy but sometimes misused feature. Eventually, your user ends up with tons of open browser windows they just forget about.

Sometimes a Web dialog will do the job better. There are two kinds of Web dialogs available: modal and modeless. Modal dialogs (available in IE 4+) will not let the user go back to the browser window until the dialog is closed. Modeless dialogs (IE5+) will let the user back to the browser, but the dialog will stay on top. Most users won't lose track of a Web dialog but will forget a new window.

Dialogs are great for getting a little more information from the users before performing an action. For example, if the user clicks a button to "Show my Purchase History," you may want to find out which product line to show. Pop up a modal dialog with a combo box and ask!

Here's how to open a modal dialog:

 window.showModalDialog("path/page.htm", null,
      "dialogHeight:100px; dialogWidth: 200px; help:yes; 
scroll:yes;"+
      "resizable:yes")

You can even pass parameters back and forth. Substitute a value or variable name for the null in the second argument to showModalDialog (above). Then, to retrieve the value in the dialog, use:

 //this is in page.htm (the dialog)

   //retrieve the argument
   var theArg = window.dialogArguments

   //return a value to the calling window
   window.returnValue = "I'm a return value"

To catch the return value in the calling window, use:

 var theReturnValue = window.showModalDialog( etc... )

To create a modeless dialog, just change the code above to call the showModelessDialog method (IE5+). Again, modeless dialogs will let the user switch focus back to the calling browser window, but the dialog will still stay on top.

Dialogs can do almost anything that a Web page can do, so get creative!

(Note: Check out the MSDN references for modal dialogs and modeless dialogs.)