编者按：DHTML Dude 一直很忙（我们不太清楚他一直在干什么，可我们觉得新生的婴儿可能够他忙活的），所以本月的文章由客座专栏作家 DHTML Dave 提供，人们更常叫他 Dave Massy，他是 Internet Explorer 开发组的项目经理。
作为本月的客座专栏作家，我想要谈谈动态 HTML (DHTML) 对话框，并解答与这些对话框有关的几个常见问题。对话框是很多应用程序的共同特征；它们通常要么允许用户输入基本数据，要么向用户发出某件事情需要采取行动的警报。对话框的示例包括当您在“文件”菜单中选择“另存为...”时出现的对话框。在这个特定的示例中，对话框使用户可以选择一个应该保存文件的位置，以及该文件应具有什么名称。使用 DHTML 编程时，您可以将对话框用作您的应用程序的一部分，而且您可以使用 HTML 指定对话框的内容。
作为一个有趣的旁白和一件很多人并不了解的事情，Internet Explorer 中的对话框自身都是使用 DHTML 构建的，这有助于开发组证明这项基础技术。例如，Internet Explorer 中的“查找”对话框（您可以通过从“编辑”菜单中选择“查找（在当前页）...”看到）的外观被设计为传统的 Windows 对话框，它具有灰色凹凸的三维外观。事实上，它是一个使用 HTML 元素显示输入字段和按钮的 DHTML 对话框。在这种特定的情况下，我们选择 Windows 界面风格的原因是 Internet Explorer 是一个 Windows 应用程序。然而，HTML 使用户界面在风格上可以具有很多灵活性，所以您可以使您的对话框看起来完全像是您的 DHTML 应用程序的一个完整部分。
我应当使用哪一类的对话框？
在我们进入如何创建和使用 DHTML 对话框的细节之前，我希望对程序员可用的两种类型的对话框进行说明，即：有模式和无模式。
有模式对话框将获得应用程序的完全聚焦，在对话框关闭前将不允许在该应用程序的其它部分进行交互操作。我前面提到的“另存为”就是这种情况的一个示例，因为该对话框必须关闭（要么通过保存文件，要么通过取消该对话框）后用户才能与应用程序进行其它交互操作。
无模式对话框在显示对话框时允许与应用程序进行某种类型的交互操作。这种情况的一个示例就是 Internet Explorer 中的“查找”对话框；显示“查找”对话框的同时，您可以滚动和查看文档的内容。由于两种类型的对话框在不同的情况下都是有用的，因此 Internet Explorer 中支持的 DHTML 对话框在版本 5.0 中得到了增强，加入了对无模式对话框的支持，这使您可以选择最适合您的应用程序的对话框类型。
“我为什么要使用对话框而不是使用 window.open 创建浏览器的一个新窗口？”您可能要问这样的问题。window.open 方法以及两种形式的对话框提供了对略微不同的问题的解决方案。下面是这三种选择间的差别，同时还给出了一些典型情况，这有助于您选择正确的解决方案。
-
window.open 方法：这种方法打开浏览器的一个新实例，通常加载某个特定 URL 指定的文档。定位已经打开的窗口的特定的已命名实例是可能的，这样您就可以避免打开新的窗口，而是使用您以前打开的现有窗口用于另一个目的。详细信息，请参见 Web Workshop 中的 open（英文）方法。通过打开浏览器的另外一个实例，用户可以在打开的窗口中自由地进行切换。您可以使用 window.open 的一个情况就是一个电子邮件应用程序，它允许用户在一个另外的窗口中打开一条电子邮件消息，同时又保持与原窗口中的消息列表的完全交互操作。
- 无模式对话框：无模式对话框允许用户在对话框打开的同时与原窗口进行交互操作。在这种情况中，对话框保持在浏览器的上面并处于禁用状态。如果用户从原始文档中移开进行其它浏览，则无模式对话框将被自动关闭，因为该对话框的所有上下文已经丧失。高级搜索功能可以很好地使用这样的对话框，以便使用户可以选择文档中找到的文本，同时使对话框保持打开的状态，这样用户就可以迅速地前进到已找到文本的下一个实例。
- 有模式对话框：有模式对话框常使程序可以使用户完全集中于某一特定的对话框，并要求在继续进行之前与其进行交互操作。这种情况的一个示例就是数据输入操作，在该操作中，必须输入某些数据后应用程序才能继续。
对话框基础
下面是一个有模式对话框的简单示例，该对话框由两个文件组成。第一个文件在按某一按钮时调用对话框；第二个文件包含对话框的内容。
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>
查看第一个有模式对话框示例
。
dialog1.htm 文件在单击按钮时执行 showModalDialog 方法，并将第二个文件 dcontent1.htm 用作对话框的内容。dcontent1.htm 文件具有一些 HTML 内容和一个 OK 按钮，单击该按钮时会将对话框关闭。注意对话框是如何带着一个状态条出现的。它可以通过对函数的可选 sFeatures 参数的值进行操作而去除。尝试改变一下各参数的值，这可以显示对话框的不同样式。例如，您可以更改 dialog1.htm 中的方法调用去除状态条并调整对话框的大小。
showModalDialog('dcontent1.htm',','status:no;resizable:yes');
现在，将方法由 showModalDialog 改为 showModelessDialog，并查看无模式对话框怎样允许用户与对话框下面的文档进行交互操作。您可以在 Web Workshop 的 DHTML 参考（英文）一节中查看关于所有对话框设置的完整说明。
交换信息
这难道不是对话框真正涉及的内容吗？要使对话框有所助益，我们需要能够向它传递信息。然后，在关闭对话框时，我们需要根据用户曾经选择的对话框选项对信息进行检索。
showModalDialog
方法的第二个参数使我们可以与对话框之间传递信息。下面是它如何这样做的一个简单示例：
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 ">    
<input type='button' onclick="returnValue=false;window.close();" value=" Cancel ">
</BODY>
</HTML>
查看第二个有模式对话框示例
。
dialog2.htm 文件调用 DHTML 对话框，后者将 dcontent2.htm 文件用作其内容。输入元素的值被传递到对话框中，对话框使用该值显示内容。返回值根据用户对 OK 或 Cancel 的选择进行设置。
在无模式对话框的情形中，返回值则有所不同。对话框将被显示，但调用 showModelessDialog 的代码将继续运行。对于无模式对话框，来自 showModelessDialog 的返回值为 DHTML 对话框中包含的文档的 window 对象，它可以随后用于与打开的对话框进行通信。我们来看一下下面的无模式对话框的示例。在该示例中，在主页面设置一个值可以影响到打开的对话框，并且在对话框中设置一个值也可以影响到主页面。
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 "
>    
<input type='button' onclick="dialogArguments.d1.innerHTML=ip1.value;window.close();"
value=" OK ">
   
<input type='button' onclick="window.close();" value=" Cancel ">
</BODY>
</HTML>
查看无模式对话框示例
。
dialog3.htm 文件调用一个对话框并将其 window 对象作为一个参数传递。对话框，dcontent3.htm, 随后使用 window 对象转而与页面进行通信，并适当地设置文本。主页面使用 showModelessDialog 调用的返回值，即对话框的 window 对象再与对话框进行通信，并适当地设置其中的文本。
一个有用的对话框是怎样的
我知道已经给出的所有示例都很简单，并都集中于 DHTML 对话框怎样运行。现在，我要向您展示一个对话框示例，它能完成稍微有用的事情。对于这个示例，我“借用”了一些 Web Team Talking 的 Heidi Housten 制作的代码，这些代码根据一个文档中使用的 <H1> 和 <H2> 标记自动生成目录 (TOC)。我将这些代码放入一个无模式对话框中，它可以给出代表页面内容的标题的链接列表。看一看，并想一想您可以使用对话框改善和引导用户体验的场合。
查看 TOC 示例
。
高级对话框
我在前面提到 Internet Explorer 使用了设计外观类似 Windows 中使用的对话框的 DHTML 对话框。如果您是一位使用 Win32 API 的较为传统的 Windows 应用程序的程序员，您同样可以使用 DHTML 对话框。然而，如果您的应用程序需要一种唯一的方法，则 DHTML 对话框支持使您可以通过使用过滤器、转换以及一些多媒体效果，选用另外一种风格，构建一个令人兴奋的用户界面。如果您希望了解关于这一内容的更多信息，可以看一看 showHTMLDialog API（英文）并阅读 创建 HTML 资源（英文）。
结束这段“对话”
使用对话框对用户的体验进行引导是任何用户界面的一个重要组成部分（对对话框的过度使用会使人分心，所以请明智地使用对话框）。这里提供的支持使您可以不受所使用的技术的限制构建希望的用户界面。我还希望我已经设法保持了 DHTML Dude 专栏的标准，也希望您觉得有用。很高兴成为本月的客座专栏作家。