JavaScrip高级应用：操作模态与非模态对话框

JavaScrip高级应用：操作模态与非模态对话框 
本文出自:http: // www.computerworld.com.cn 作者: 甘冀平 (2002-01-29 20:41:38) 
我们知道，对话框一般分为两种类型：模态类型（modal）与非模态类型（modeless）。所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性，用户可以在当前对话框以及其他窗口间进行切换。本文介绍如何使用JavaScript语言来创建这两种类型的对话框、控制其大小和位置、改变其外观以及在对话框间的数据传递。 
本文的所有例程中，从层次上涉及到2个HTML页面。我们把第一个页面叫做caller页面，第二个页面叫做callee页面。也就是说，在caller页面执行代码创建生成callee页面。 
一、创建模态和非模态对话框 
首先，我们举个例子来快速了解一下什么是模态与非模态。在caller.htm中，我们输入以下代码： 
< INPUT TYPE = " button "  VALUE = " 创建模态对话框 "  onclick = " fnOpenModal() " >  
< br >< br >  
< INPUT TYPE = " button "  VALUE = " 创建非模态对话框 "  onclick = " 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 = " 创建模态对话框 "  onclick = " fnOpenModal() " >  
< br >< br >  
< INPUT TYPE = " button "  VALUE = " 创建非模态对话框 "  onclick = " 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 = " 创建模态对话框 "  onclick = " fnOpenModal() " >  
< br >< br >  
< INPUT TYPE = " button "  VALUE = " 创建非模态对话框 "  onclick = " 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 "  onclick = " 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 onclick = " getInfoAndUpdate(); " >  
< INPUT VALUE = " Ok "  TYPE = button onclick = " getInfoAndUpdate();window.close(); " >  
< INPUT VALUE = " Cancel "  TYPE = button onclick = " 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页面中创建窗口的一个新技术。在实际应用中，模态对话框的功能比较实用，可用于必须让访问者阅读相关内容的情况下。另外，利用对象方式在窗口间传递数据，功能非常强大但使用却不复杂，是非常值得一用的技术。