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.)