Export (0) Print
Expand All

The Importance of Good Dialog

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Dave Massy
Microsoft Corporation

September 25, 2000

Editor's note: The DHTML Dude has been busy (we're not really sure what he's been doing, but we think the new baby might be keeping him up), so this month's article is supplied by guest columnist DHTML Dave, more commonly known as Dave Massy, a program manager on the Internet Explorer team.

Contents

What Sort of Dialog Box Should I Use?
Dialog Box Basics
Exchanging Information
How About a Useful Dialog Box
Advanced Dialog Boxes
And So to End This Dialog

As guest columnist this month, I thought I'd talk about Dynamic HTML (DHTML) dialog boxes and tackle a few of the frequently asked questions that relate to them. Dialog boxes are a common aspect of many applications; they typically either allow a user to enter essential data or alert the user to something that requires action. Examples of dialog boxes include the box that appears in many applications when you select Save As from the File menu. In this particular example, the dialog box allows a user to select where a file should be saved and what name the file should have. When programming with DHTML, you can use dialog boxes as part of your application, and you can use HTML to specify the content of the dialog box.

As an interesting aside, and something that many people do not realize, dialog boxes in Internet Explorer are themselves built out of DHTML, which helps the development team prove the underlying technology. For example, the Find dialog box in Internet Explorer, which you can see by selecting Find (on this page)... from the Edit menu, has been designed to look just like a traditional Windows dialog box, with a gray, chiseled, three-dimensional look. In fact, it is a DHTML dialog box that uses HTML elements to display the input fields and buttons. In this particular case, we chose to emulate the Windows look and feel because Internet Explorer is a Windows application. However, HTML allows a lot of flexibility in the look and feel of the user interface, so you can make your dialog boxes look like a full part of your DHTML application.

What Sort of Dialog Box Should I Use?

Before we go into details of how DHTML dialog boxes are created and used, I want to explain the two types of dialog boxes available to a programmer: modal and modeless.

A modal dialog box will receive the full focus of the application and will not allow any interaction with the rest of the application until the dialog box has been dismissed. The Save As dialog box I referred to earlier is an example of this, as the dialog box must be dismissed—either by saving the file or by canceling the dialog box—before the user can have any other interaction with the application.

A modeless dialog box allows some type of interaction with the application while the dialog box is displayed. An example of this is the Find dialog box in Internet Explorer; you can scroll and view the content of the document while the Find dialog box is displayed. Because both types of dialog boxes are useful in different circumstances, the DHTML dialog box support in Internet Explorer was enhanced in version 5.0 to include support for modeless dialog boxes, which enables you to select the dialog box type that best suits your application.

"Why would I use a dialog box instead of using window.open to create a new window of the browser?" you might ask. The window.open method and the two forms of dialog boxes offer solutions to slightly different problems. Here are the differences among the three options, with some typical scenarios to help you choose the right solution.

  • window.open method. This method opens a new instance of the browser, usually loading the document a particular URL specifies. It is possible to target specific, named instances of windows that are already open, so you can avoid opening new windows, and instead utilize an existing window that you previously opened for another purpose. See the open method in the MSDN Library for details. By opening a separate instance of the browser, you allow the user to switch freely between the open windows. One scenario in which you can use window.open is an e-mail application that allows the user to open an e-mail message in a separate window while retaining full interaction with the list of messages in the original window.
  • Modeless dialog box. The modeless dialog box allows a user to interact with the original window while the dialog box is open. In this situation, the dialog box remains on top of the browser in a disabled state. If the user navigates away from the original document, the modeless dialog box is automatically dismissed, as all context for the dialog box is lost. An advanced-find functionality might well use such a dialog box to enable the user to select found text in the document while keeping the dialog box open so that he or she can quickly proceed to the next instance of the found text.
  • Modal dialog box. The modal dialog box allows the program to focus the user's full attention on a particular dialog box and to require interaction with it before continuing. An example of that might be a data-entry operation in which certain data must be entered before the application can continue.

Dialog Box Basics

Here is a simple example of a modal dialog box that is made up of two files. The first file invokes the dialog box when a button is pressed; the second file contains the content of the dialog box.

dialog1.htm:

<HTML>
<BODY>
This page will invoke my DHTML dialog box when the button is clicked.
<BR>
<INPUT TYPE='button' ONCLICK="showModalDialog('dcontent1.htm');" 
VALUE="Create Dialog">
</BODY>
</HTML>

dcontent1.htm:

<HTML>
<BODY STYLE="background-color:lightblue;margin:10;">
This is some content for my DHTML dialog box.
<BR>
<BR>
<INPUT TYPE='button' ONCLICK="window.close();" VALUE=" OK ">
</BODY>
</HTML>

View the first modal dialog box sample.

The dialog1.htm file executes the showModalDialog method when the button is clicked, and uses the second file, dcontent1.htm, as the contents of the dialog box. The dcontent1.htm file has some HTML content and an OK button that, when clicked, will dismiss the dialog box. Notice how the dialog box comes up with a status bar on it. This can be removed by manipulating the values of the function's optional sFeatures parameter. Try playing around with changing the parameter values to show different styles of dialog boxes. For example, you can change the method call in dialog1.htm to remove the status bar and allow the box to resize.

showModalDialog('dcontent1.htm','','status:no;resizable:yes');

Now, change the method from showModalDialog to showModelessDialog and see how a modeless dialog box allows a user to interact with the document beneath it. You can see a full description of all the dialog-box settings in the DHTML References section of the MSDN Library.

Exchanging Information

Isn't that what dialog is really about? For the dialog box to be useful, we need to be able to pass information to it. Then, when the dialog box is dismissed, we need to retrieve information based on the dialog box options the user chose.

The second parameter of the showModalDialog method allows us to pass information to and from the dialog box. Here's a simple example of how it works:

dialog2.htm

<HTML>
<HEAD>
</HEAD>
<SCRIPT>
function doDialog()
{
  var x=showModalDialog('dcontent2.htm',ip1.value,'status:no;resizable:yes');
  d1.innerHTML="The dialog box return value was: " + x;
}
</SCRIPT>
<BODY>
This page will invoke my DHTML dialog box when the button is clicked.
<BR><BR>
<INPUT TYPE=text ID=ip1 VALUE='input content'>
<BR><BR>
<INPUT TYPE='button' ONCLICK="doDialog()" VALUE="Create Dialog">
<BR><BR>
<DIV ID=d1></DIV>
</BODY>
</HTML>

dcontent2.htm

<HTML>
<BODY STYLE="background-color:lightblue;margin:10;"   
ONLOAD="d1.innerHTML=dialogArguments;">
This is some content for my DHTML dialog box.
<BR><BR>
<DIV ID=d1></DIV>
<BR><BR>
<INPUT TYPE='button' ONCLICK="returnValue=true;window.close();" 
VALUE=" OK "> &NBSP&NBSP&NBSP
<INPUT TYPE='button' ONCLICK="returnValue=false;window.close();" VALUE=" Cancel ">
</BODY>
</HTML>

View the second modal dialog box sample.

The dialog2.htm file invokes the DHTML dialog box, which uses the dcontent2.htm file as its content. The value of an input element is passed into the dialog box, which uses that value to display content. The return value is set according to the user's choice of OK or Cancel.

In the case of a modeless dialog box, the return value is a little different. The dialog box will be displayed, but the code that called showModelessDialog will continue to run. For a modeless dialog box, the return value from showModelessDialog is the window object of the document contained in the DHTML dialog box, which can then be used to communicate with the open dialog box. Take a look at the following example of a modeless dialog box, where setting a value in the main page can affect the open dialog box, and setting a value in the dialog box can affect the main page.

dialog3.htm

<HTML>
<HEAD>
</HEAD>
<SCRIPT>
var dWin=null;
function doDialog()
{
dWin=showModelessDialog('dcontent3.htm',window,'status:no;resizable:yes');
}

function setDialogValue()
{
  if (dWin != null)
  {
   dWin.d1.innerHTML=ip1.value;
  }
}
</SCRIPT>
<BODY>
This page will invoke my DHTML dialog box when the button is clicked.
<BR><BR>
<INPUT TYPE=text ID=ip1 VALUE='input content'>
<BR><BR>
<INPUT TYPE='button' ONCLICK="setDialogValue();" 
VALUE="Set Dialog Value">
<BR><BR>
<INPUT TYPE='button' ONCLICK="doDialog();" VALUE="Create Dialog">
<BR><BR>
<DIV ID=d1></DIV>
</BODY>
</HTML>

dcontent3.htm

<HTML>
<SCRIPT>
function window.onunload()
{
  dialogArguments.dWin=null;
}
</SCRIPT>

<BODY STYLE="background-color:lightblue;margin:10;">
This is some content for my DHTML dialog box.
<BR><BR>
<DIV ID=d1></DIV>
<BR><BR>
<INPUT TYPE='text' ID=ip1 onclick='dialogArguments.d1.innerHTML=ip1.value;'>
<BR><BR>
<INPUT TYPE='button' ONCLICK="dialogArguments.d1.innerHTML=ip1.value;" 
VALUE=" Apply "> &NBSP&NBSP&NBSP
<INPUT TYPE='button' 
ONCLICK="dialogArguments.d1.innerHTML=ip1.value;window.close();" 
VALUE=" OK ">
&NBSP&NBSP&NBSP
<INPUT TYPE='button' ONCLICK="window.close();" VALUE=" Cancel ">

</BODY>
</HTML>

View the modeless dialog box sample.

The dialog3.htm file invokes a dialog box and passes in its window object as an argument. The dialog box, dcontent3.htm, then uses the window object to communicate back to the page and set text as appropriate. The main page uses the showModelessDialog call's return value, which is the window object of the dialog box, to, in turn, communicate with the dialog box and to set text within it as appropriate.

How About a Useful Dialog Box

I realize that all the examples I've shown so far have been simple and have focused on how DHTML dialog boxes function. Now, I thought I'd show you an example of a dialog box that actually does something a little more useful. For this, I "borrowed" some code that Heidi Housten of the Web Team Talking produced to automatically generate a table of contents (TOC) based on the <H1> and <H2> tags used in a document. I placed this code in a modeless dialog box, which can provide a linked list of headings that represents the content of the page. Take a look, and think about where you might wish to use dialog boxes to improve and guide the user experience.

View the TOC sample.

Advanced Dialog Boxes

I mentioned earlier that Internet Explorer uses DHTML dialog boxes designed to look like those used in Windows. If you are a more traditional Windows application programmer who uses the Win32 API, you, too, can use DHTML dialog boxes. If, however, your application requires a unique approach, the support for DHTML dialog boxes allows you to adopt an alternative look and feel by using filters, transitions, and some of the multimedia effects to build an exciting user interface. If you'd like to know more about this, take a look at the showHTMLDialog API and read Creating an HTML Resource.

And So to End This Dialog

The use of dialog boxes to guide the user experience is an important part of any user interface (although overuse of dialog boxes can be a distraction, so use them wisely). The support provided here allows you to build the desired user interface without being restricted by the technology you use. I also hope that I've managed to maintain the standard of the DHTML Dude column, and that you've found this useful. It's been a pleasure to stand in as guest columnist this month.

 

DHTML Dude

Dave Massy works on Internet Explorer as a program manager.


  
Show:
© 2014 Microsoft