devxlogo

Using Web Dialogs in IE

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.

See also  5 Tips for Working With an Onsite Interpreter

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

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist