* 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)。我将这些代码放入一个无模式对话框中，它可以给出代表页面内容的标题的链接列表。看一看，并想一想您可以使用对话框改善和引导用户体验的场合。
高级对话框
我在前面提到 Internet Explorer 使用了设计外观类似 Windows 中使用的对话框的 DHTML 对话框。如果您是一位使用 Win32 API 的较为传统的 Windows 应用程序的程序员，您同样可以使用 DHTML 对话框。然而，如果您的应用程序需要一种唯一的方法，则 DHTML 对话框支持使您可以通过使用过滤器、转换以及一些多媒体效果，选用另外一种风格，构建一个令人兴奋的用户界面。如果您希望了解关于这一内容的更多信息，可以看一看 showHTMLDialog API（英文）并阅读 创建 HTML 资源（英文）。
结束这段“对话”
* 无模式对话框：无模式对话框允许用户在对话框打开的同时与原窗口进行交互操作。在这种情况中，对话框保持在浏览器的上面并处于禁用状态。如果用户从原始文档中移开进行其它浏览，则无模式对话框将被自动关闭，因为该对话框的所有上下文已经丧失。高级搜索功能可以很好地使用这样的对话框，以便使用户可以选择文档中找到的文本，同时使对话框保持打开的状态，这样用户就可以迅速地前进到已找到文本的下一个实例。
* 有模式对话框：有模式对话框常使程序可以使用户完全集中于某一特定的对话框，并要求在继续进行之前与其进行交互操作。这种情况的一个示例就是数据输入操作，在该操作中，必须输入某些数据后应用程序才能继续。
对话框基础
下面是一个有模式对话框的简单示例，该对话框由两个文件组成。第一个文件在按某一按钮时调用对话框；第二个文件包含对话框的内容。
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)。我将这些代码放入一个无模式对话框中，它可以给出代表页面内容的标题的链接列表。看一看，并想一想您可以使用对话框改善和引导用户体验的场合。
高级对话框
我在前面提到 Internet Explorer 使用了设计外观类似 Windows 中使用的对话框的 DHTML 对话框。如果您是一位使用 Win32 API 的较为传统的 Windows 应用程序的程序员，您同样可以使用 DHTML 对话框。然而，如果您的应用程序需要一种唯一的方法，则 DHTML 对话框支持使您可以通过使用过滤器、转换以及一些多媒体效果，选用另外一种风格，构建一个令人兴奋的用户界面。如果您希望了解关于这一内容的更多信息，可以看一看 showHTMLDialog API（英文）并阅读 创建 HTML 资源（英文）。
结束这段“对话”
使用对话框对用户的体验进行引导是任何用户界面的一个重要组成部分（对对话框的过度使用会使人分心，所以请明智地使用对话框）。这里提供的支持使您可以不受所使用的技术的限制构建希望的用户界面。我还希望我已经设法保持了 DHTML Dude 专栏的标准，也希望您觉得有用。很高兴成为本月的客座专栏作家。
本文转自 梦在旅途 博客园博客，原文链接： http://www.cnblogs.com/zuowj/archive/2012/12/11/2813765.html ，如需转载请自行联系原作者
