模态与非模态对话框

 

我们知道，对话框一般分为两种类型：模态类型（ modal ）与非模态类型（ modeless ）。所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性，用户可以在当前对话框以及其他窗口间进行切换。本文介绍如何使用 JavaScript 语言来创建这两种类型的对话框、控制其大小和位置、改变其外观以及在对话框间的数据传递。 本文的所有例程中，从层次上涉及到 2 个 HTML 页面。我们把第一个页面叫做 caller 页面，第二个页面叫做 callee 页面。也就是说，在 caller 页面执行代码创建生成 callee 页面。 一、创建模态和非模态对话框 首先，我们举个例子来快速了解一下什么是模态与非模态。在 caller.htm 中，我们输入以下代码： <INPUT TYPE="button" VALUE=" 创建模态对话框 " οnclick="fnOpenModal()"> <br><br> <INPUT TYPE="button" VALUE=" 创建非模态对话框 " οnclick="fnOpenModeless()"> <script language="javascript"> function fnOpenModal(){ window.showModalDialog("callee.htm") } function fnOpenModeless(){ window.showModelessDialog("callee.htm") } </script>      在浏览器中打开 caller.htm ，点击 “ 创建模态对话框 ” 按钮，将会出现一个对话框窗口，其中的内容是 callee.htm 。你会看到，除了关闭这个新窗口，无论怎样我们也不能将其他的窗口设置为 “ 当前活动 ” 窗口，这个一直是活动状态的窗口类型就是模态类型。关闭这个模态对话框，回到 caller.htm 页面，点击 “ 创建非模态对话框 ” ，出现一个包含 callee.htm 页面的对话框窗口。这回有所不同，鼠标可以转移到其他地方使另外的窗口成为 “ 当前活动 ” 状态，这就是非模态的概念。 接下来，我们看看创建模态对话框与非模态对话框的相关语法： 创建模态对话框： vReturnValue = window.showModalDialog(sURL [, vFreeArgument] [, sOrnaments]); 创建非模态对话框： vReturnValue = window.showModelessDialog(sURL [, vFreeArgument] [, sOrnaments]); 从上面的语法我们得知：除了名字有所区别外，参数种类与含义都相同。以下是各参数的含义： · VReturnValue ：对于 showModalDialog() ，它表示被打开的对话框窗口设置的 returnValue 属性值。对于 showModelessDialog() ，它表示新窗口对象。

· VFreeArgument ：这个参数可用于传递某种类型的数据到打开的对话框，数据可以是一个数值、字符串、数组或者一个对象类型。在新窗口中引用这个数值时，可通过新创建 window 对象的 dialogArguments 属性。

· SOrnaments ：用这个参数指定新窗口的外观。可选择的窗口属性有很多种，当有多种控制需求时，将相关内容用一个字符串连接起来，其间用分号隔开。以下是可选择的属性种类：

o dialogHeight: sHeight
o dialogLeft: sXpos
o dialogTop: sYpos
o dialogWidth: sWidth
o center: ( yes | no | 1 | 0 | on | off )
o dialogHide: ( yes | no | 1 | 0 | on | off )
o edge: ( sunken | raised )
o help: ( yes | no | 1 | 0 | on | off )
o resizable: ( yes | no | 1 | 0 | on | off )
o scroll: ( yes | no | 1 | 0 | on | off )
o status: ( yes | no | 1 | 0 | on | off )
除了以上属性外，我们还可以加入更加丰富的 CSS 控制。 以下我们来详细解释如何应用这些属性。

二、控制对话框大小和位置
      控制对话框的大小和位置涉及到 5 个方面：高度（ dialogHeight ）、宽度（ dialogWidth ）、相对于桌面左上角的 x 坐标（ dialogLeft ）、 y 坐标（ dialogTop ）以及是否让对话框窗口居中（ center ）。由于不同版本的 Internet Explorer 浏览器处理的默认度量单位并非一致，所以我们在指定高度、宽度等大小时，最好是同时设置好单位。单位种类包括很多，比如 cm 、 mm 、 in 、 pt 、 pc 、 px 。请注意：最小的高度值是 100px 。

下面的代码将打开一个高 200px 、宽 800px 的对话框：
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px');

我们注意到，打开的新窗口会在桌面中处于居中的位置，这也正是居中属性（ center ）的默认值。居中属性（ center ）的可取值包括 yes 、 no 、 1 、 0 、 on 和 off ，含义一目了然。执行以下代码，看看关闭居中属性后新窗口的位置：
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;center:no');

我们看到，新窗口紧挨者桌面的左上角打开。当然，我们可以使用 dialogLeft 和 dialogTop 属性来精确定义新窗口的打开位置。下面的代码将在相对于桌面左上角的 x 位置 300px 和 y 位置 500px 处打开新窗口：
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;dialogLeft:300;dialogTop:500')

注意，即使指定了居中属性，但如果同时设置了 dialogLeft 和 dialogTop 属性值，那么窗口位置将遵从后者。试一试执行下面的代码：
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;dialogLeft:300;
dialogTop:500;center:yes')

三、改变对话框外观
对话框的外观控制包括从窗口边缘风格（ edge ）、是否存在滚动条（ scroll ）、是否包含上下文关联提示图标（ help ）、是否显示状态栏（ status ）以及是否可以改变窗口大小（ resizable ）等方面。默认情况下，新打开的窗口是大小不可改变的、边缘风格为凸起、在新窗口右上角显示一个上下文关联提示图标、存在滚动条，比如：


edge 的可取值为 sunken （凹陷）和 raised （凸起）， status 、 help 、 resizeable 和 scroll 的可取值都是 yes 、 no 、 1 、 0 、 on 和 off ，其含义一目了然。
下面的代码将去除上下文关联提示图标、不显示状态栏、窗口边缘风格为凹陷：
showModelessDialog("callee.htm","","status:0;help:0;edge:sunken");
执行后，图示如下：


四、从 caller 页面传递数据到 callee 页面
       上面我们介绍了创建模态和非模态窗口的语法以及如何控制新窗口的大小、位置和外观，接下来我们研究一下实际应用中更实用的功能：如何从 caller 页面传递数据到 callee 页面。
从 caller 页面传递给 callee 页面的数据分为 3 类：传递值、传递数组引用以及传递对象 , 它们都是通过 showModalDialog() 和 showModelessDialog() 的第 2 个参数实现的。

（一）传递值类型数据
在 caller.htm 页面中输入以下代码：
<INPUT TYPE="button" VALUE=" 创建模态对话框 " οnclick="fnOpenModal()">
<br><br>
<INPUT TYPE="button" VALUE=" 创建非模态对话框 " οnclick="fnOpenModeless()">
<script language="javascript">
<!--
function fnOpenModal(){
window.showModalDialog("callee.htm"," 打开了一个新模态窗口 ")
}
function fnOpenModeless(){
window.showModelessDialog("callee.htm"," 打开了一个新非模态窗口 ")
}
// -->
</script>
在 callee.htm 页面中输入以下代码：
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(dialogArguments);
// -->
</SCRIPT>
在浏览器中打开 caller.htm ，点击任意一个按钮，我们将首先看到如下的提示信息框：



然后才出现新窗口。这种情况下， callee.htm 页面中的 window 对象的属性 dialogArguments 将对应于 caller.htm 页面中的 " 打开了一个新模态窗口 " 或者 " 打开了一个新非模态窗口 " 。如果直接打开 callee.htm ，将会出现错误提示。


（二）传递数组引用类型数据
      第一种值类型数据的传递中，在 callee.htm 页面中只能读取 caller.htm 页面的传递数据。当需要对 caller.htm 页面的传递内容进行修改时，就需使用到数组引用类型的传递方式。
首先，在 caller.htm 页面中输入以下代码：
<INPUT TYPE="button" VALUE=" 创建模态对话框 " οnclick="fnOpenModal()">
<br><br>
<INPUT TYPE="button" VALUE=" 创建非模态对话框 " οnclick="fnOpenModeless()">
<script language="javascript">
<!--
var a = new Array;
a[0]="first";
a[1]="second";
a[2]="third";
function fnOpenModal(){
window.showModalDialog("callee.htm",a)
}
function fnOpenModeless(){
window.showModelessDialog("callee.htm",a)
}
// -->
</script>
然后在 callee.htm 页面中输入以下代码：
<SCRIPT LANGUAGE="JavaScript">
<!--
a = dialogArguments;
alert(a);
a[0] = "fourth";
// -->
</SCRIPT>
最后，在浏览器中打开 caller.htm ，点击任意一个按钮，我们将首先看到如下的对话框：


接着关闭这个对话框以及新打开的窗口，再次点击一个按钮，又出现一个对话框：


从运行结果我们看到，在 caller.htm 页面中通过对数组 a 的地址引用，就可以实现在 callee.htm 中修改数组 a 的内容。
注意在 callee.htm 中要首先建立对传递数据的附值： a = dialogArguments 。

（三）传递对象类型数据
     在 caller.htm 和 callee.htm 中传递数据的最有效方式是通过对象方式进行，这不仅能实现从 caller.htm 到 callee.htm 的传递，还能从 callee.htm 传递到 caller.htm 。而且，我们还可以在 caller.htm 中定义对象的方法，再在 callee.htm 中使用它们。实际上，我们可以将 caller.htm 的 window 对象传递给 callee.htm ，这样就可以在 callee.htm 中访问 caller.htm 的变量及函数。
来看看一个实际的例子。在 caller.htm 中输入以下代码：
<HTML>
<HEAD>
<TITLE> 传递对象数据 </TITLE>
<SCRIPT>
var sColor="";
function callDialog() {
showModelessDialog("callee.html",window,"status:false;dialogWidth:300px;dialogHeight:150px");
}
function update()
{
oColor.innerText = sColor;
}
</SCRIPT>
</HEAD>
<BODY>
<P> 输入你最喜欢的颜色 : <SPAN ID="oColor" STYLE="color:red;font-size:24">Yellow</SPAN></P>
<INPUT TYPE="button" VALUE="Display Modeless Dialog" οnclick="callDialog()">
</BODY>
</HTML>

在 callee.htm 中输入以下代码：
<HTML>
<HEAD>
<TITLE>callee.html</TITLE>
<SCRIPT>
function getInfoAndUpdate() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update();
}
function cancel() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = "Yellow";
callerWindowObj.update();
}
</SCRIPT>
</HEAD>
<BODY>
输入你最喜欢的颜色 :<INPUT ID=oEnterColor><BR><BR>
<INPUT VALUE="Apply" TYPE=button οnclick="getInfoAndUpdate();">
<INPUT VALUE="Ok" TYPE=button οnclick="getInfoAndUpdate();window.close();">
<INPUT VALUE="Cancel" TYPE=button οnclick="cancel();window.close();">
</BODY>
</HTML>
在浏览器中打开 caller.htm ，点击 “ 显示非模态对话框 ” 按钮，出现新对话框：


在对话框中输入其他颜色名称，点击 “Apply” 按钮后，执行 callee.htm 中的 getInfoAndUpdate 函数：
function getInfoAndUpdate() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update();
}

      因为在 caller.htm 中传递给 callee.htm 的是对象类型数据 window ，所以经过第一条语句的附值， callerWindowObj 就指向了 caller.htm 页面，然后就可以在 callee.htm 中按照 callerWindowObj.xxx 的形式引用 caller.htm 中的变量及函数： callerWindowObj.sColor = oEnterColor.value 负责将 callee.htm 中输入的颜色名称传递给 caller.htm 中的变量 sColor ，然后再执行 caller.htm 中的 update() 函数更新显示信息。
可以看到，通过对象方式传递数据，功能很丰富强大，而且使用起来也不复杂。

六、结 语
      以上对使用 JavaScript 语言操作模态和非模态对话框进行了详细介绍，相信你又掌握了在 html 页面中创建窗口的一个新技术。在实际应用中，模态对话框的功能比较实用，可用于必须让访问者阅读相关内容的情况下。另外，利用对象方式在窗口间传递数据，功能非常强大但使用却不复杂，是非常值得一用的技术