模式对话框传递对象

本文的所有例程中，从层次上涉及到2个HTML页面。我们把第一个页面叫做caller页面，第二个页面叫做callee页面。也就是说，在caller页面执行代码创建生成callee页面。
一、创建模态和非模态对话框
首先，我们举个例子来快速了解一下什么是模态与非模态。在caller.htm中，我们输入以下代码：
· SOrnaments：用这个参数指定新窗口的外观。可选择的窗口属性有很多种，当有多种控制需求时，将相关内容用一个字符串连接起来，其间用分号隔开。以下是可选择的属性种类：
o dialogHeight: sHeight
o dialogLeft: sXpos
o dialogTop: sYpos
o di 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 )
edge的可取值为sunken（凹陷）和raised（凸起），status、help、resizeable和scroll的可取值都是yes、no、1、0、on和off，其含义一目了然。
下面的代码将去除上下文关联提示图标、不显示状态栏、窗口边缘风格为凹陷：
showModelessDialog("callee.htm","","status:0;help:0;edge:sunken");
（二）传递数组引用类型数据
第一种值类型数据的传递中，在callee.htm页面中只能读取caller.htm页面的传递数据。当需要对caller.htm页面的传递内容进行修改时，就需使用到数组引用类型的传递方式。
首先，在caller.htm页面中输入以下代码：
<INPUT TYPE="button" value="创建模态对话框" onclick="fnOpenModal()">
下面的代码将打开一个高200px、宽800px的对话框：
window.showModalDialog(’callee.htm’,’’,’dialogHeight:200px;dialogWidth:800px’);
我们注意到，打开的新窗口会在桌面中处于居中的位置，这也正是居中属性（center）的默认值。居中属性（center）的可取值包括yes、no、1、0、on和off，含义一目了然。执行以下代码，看看关闭居中属性后新窗口的位置：
}
// -->
</script>
然后在callee.htm页面中输入以下代码：
<SCRIPT LANGUAGE="javascript">
<!--
a = dialogArguments;
alert(a);
a[0] = "fourth";
// -->
（一）传递值类型数据
在caller.htm页面中输入以下代码：
<INPUT TYPE="button" value="创建模态对话框" onclick="fnOpenModal()">
<br><br>
<INPUT TYPE="button" value="创建非模态对话框" onclick="fnOpenModeless()">
二、控制对话框大小和位置
控制对话框的大小和位置涉及到5个方面：高度（dialogHeight）、宽度（dialogWidth）、相对于桌面左上角的x坐标（dialogLeft）、y坐标（dialogTop）以及是否让对话框窗口居中（center）。由于不同版本的Internet Explorer浏览器处理的默认度量单位并非一致，所以我们在指定高度、宽度等大小时，最好是同时设置好单位。单位种类包括很多，比如cm、mm、in、pt、pc、px。请注意：最小的高度值是100px。
</SCRIPT>
最后，在浏览器中打开caller.htm，点击任意一个按钮，我们将首先看到如下的对话框：
接着关闭这个对话框以及新打开的窗口，再次点击一个按钮，又出现一个对话框：
从运行结果我们看到，在caller.htm页面中通过对数组a的地址引用，就可以实现在callee.htm中修改数组a的内容。
function fnOpenModal(){
window.showModalDialog("callee.htm")
}
function fnOpenModeless(){
window.showModelessDialog("callee.htm")
}
</script>
a[1]="second";
a[2]="third";
function fnOpenModal(){
window.showModalDialog("callee.htm",a)
}
function fnOpenModeless(){
window.showModelessDialog("callee.htm",a)
window.showModelessDialog("callee.htm","打开了一个新非模态窗口")
}
// -->
</script>
在callee.htm页面中输入以下代码：
<SCRIPT LANGUAGE="javascript">
<!--
alert(dialogArguments);
<INPUT TYPE="button" value="创建模态对话框" onclick="fnOpenModal()">
<br><br>
<INPUT TYPE="button" value="创建非模态对话框" onclick="fnOpenModeless()">
<script language="javascript">
window.showModalDialog(’callee.htm’,’’,’dialogHeight:200px;dialogWidth:800px;dialogLeft:300;
dialogTop:500’)
注意，即使指定了居中属性，但如果同时设置了dialogLeft和dialogTop属性值，那么窗口位置将遵从后者。试一试执行下面的代码：
<script language="javascript">
<!--
function fnOpenModal(){
window.showModalDialog("callee.htm","打开了一个新模态窗口")
}
function fnOpenModeless(){
我们知道，对话框一般分为两种类型：模态类型（modal）与非模态类型（modeless）。所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性，用户可以在当前对话框以及其他窗口间进行切换。本文介绍如何使用javascript语言来创建这两种类型的对话框、控制其大小和位置、改变其外观以及在对话框间的数据传递。
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控制。 以下我们来详细解释如何应用这些属性。
window.showModalDialog(’callee.htm’,’’,’dialogHeight:200px;dialogWidth:800px;center:no’);
我们看到，新窗口紧挨者桌面的左上角打开。当然，我们可以使用dialogLeft和dialogTop 属性来精确定义新窗口的打开位置。下面的代码将在相对于桌面左上角的x位置300px和y位置500px处打开新窗口：
接下来，我们看看创建模态对话框与非模态对话框的相关语法：
创建模态对话框：
vReturnvalue = window.showModalDialog(sURL [, vFreeArgument] [, sOrnaments]);
创建非模态对话框：
vReturnvalue = window.showModelessDialog(sURL [, vFreeArgument] [, sOrnaments]);
从上面的语法我们得知：除了名字有所区别外，参数种类与含义都相同。以下是各参数的含义：
· VReturnvalue：对于showModalDialog()，它表示被打开的对话框窗口设置的returnvalue属性值。对于showModelessDialog()，它表示新窗口对象。
· VFreeArgument：这个参数可用于传递某种类型的数据到打开的对话框，数据可以是一个数值、字符串、数组或者一个对象类型。在新窗口中引用这个数值时，可通过新创建window对象的dialogArguments 属性。