父窗口与子窗口交互
我们进入如何创建和使用 DHTML 对话框的细节之前，我希望对程序员可用的两种类型的对话框进行说明，即：有模式和无模式。
有模式对话框将获得应用程序的完全聚焦，在对话框关闭前将不允许在该应用程序的其它部分进行交互操作。我前面提到的“另存为”就是这种情况的一个示例，因为该对话框必须关闭（要么通过保存文件，要么通过取消该对话框）后用户才能与应用程序进行其它交互操作。
无模式对话框在显示对话框时允许与应用程序进行某种类型的交互操作。这种情况的一个示例就是 Internet Explorer 中的“查找”对话框；显示“查找”对话框的同时，您可以滚动和查看文档的内容。由于两种类型的对话框在不同的情况下都是有用的，因此 Internet Explorer 中支持的 DHTML 对话框在版本 5.0 中得到了增强，加入了对无模式对话框的支持，这使您可以选择最适合您的应用程序的对话框类型。
我为什么要使用对话框而不是使用 window.open 创建浏览器的一个新窗口？”您可能要问这样的问题。window.open 方法以及两种形式的对话框提供了对略微不同的问题的解决方案。下面是这三种选择间的差别，同时还给出了一些典型情况，这有助于您选择正确的解决方案。
· window.open 方法：这种方法打开浏览器的一个新实例，通常加载某个特定 URL 指定的文档。定位已经打开的窗口的特定的已命名实例是可能的，这样您就可以避免打开新的窗口，而是使用您以前打开的现有窗口用于另一个目的。详细信息，请参见 Web Workshop 中的 open（英文）方法。通过打开浏览器的另外一个实例，用户可以在打开的窗口中自由地进行切换。您可以使用 window.open 的一个情况就是一个电子邮件应用程序，它允许用户在一个另外的窗口中打开一条电子邮件消息，同时又保持与原窗口中的消息列表的完全交互操作。
下面是一个使用window.open弹出窗口的简单的例子：
<script>
function open_cate()
{
</script>
父窗口向弹出窗口传递信息
这里我采用的办法是在URL中拼接参数传递信息。window.open的第一个参数为URL，我们可以把参数加在URL后，例如'OpenUp.aspx?parm1=abc&parm2=<%=serversideparm%>'。这样，只需在弹出窗口QueryString到这些参数，就实现了动态向弹出窗口传递信息。
将弹出窗口的信息传回父窗口
使用弹出传口的目的主要是为了同用户的交互，所以如何在父页面中得到用户对弹出窗口的操作结果是非常重要的。其实这里实现的方法也很简单，同样是通过JavaScript：通过window.opener得到父窗口的window对象，就可以对父窗口进行操作，比如对某个TextBox设值。
· 无模式对话框：无模式对话框允许用户在对话框打开的同时与原窗口进行交互操作。在这种情况中，对话框保持在浏览器的上面并处于禁用状态。如果用户从原始文档中移开进行其它浏览，则无模式对话框将被自动关闭，因为该对话框的所有上下文已经丧失。高级搜索功能可以很好地使用这样的对话框，以便使用户可以选择文档中找到的文本，同时使对话框保持打开的状态，这样用户就可以迅速地前进到已找到文本的下一个实例。
· 有模式对话框：有模式对话框常使程序可以使用户完全集中于某一特定的对话框，并要求在继续进行之前与其进行交互操作。这种情况的一个示例就是数据输入操作，在该操作中，必须输入某些数据后应用程序才能继续。
对话框基础
下面是一个有模式对话框的简单示例，该对话框由两个文件组成。第一个文件在按某一按钮时调用对话框；第二个文件包含对话框的内容。
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 >
<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 对象再与对话框进行通信，并适当地设置其中的文本。
