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

本文的所有例程中，从层次上涉及到2个HTML页面。我们把第一个页面叫做caller页面，第二个页面叫做callee页面。也就是说，在caller页面执行代码创建生成callee页面。
一、创建模态和非模态对话框
首先，我们举个例子来快速了解一下什么是模态与非模态。在caller.htm中，我们输入以下代码：




function fnOpenModal(){
window.showModalDialog("callee.htm")
}
function fnOpenModeless(){
window.showModelessDialog("callee.htm")
}

在浏览器中打开caller.htm，点击“创建模态对话框”按钮，将会出现一个对话框窗口，其中的内容是callee.htm。你会看到，除了关闭这个新窗口，无论怎样我们也不能将其他的窗口设置为“当前活动”窗口，这个一直是活动状态的窗口类型就是模态类型。关闭这个模态对话框，回到caller.htm页面，点击“创建非模态对话框”，出现一个包含callee.htm页面的对话框窗口。这回有所不同，鼠标可以转移到其他地方使另外的窗口成为“当前活动”状态，这就是非模态的概念。
从caller页面传递数据到callee页面
上面我们介绍了创建模态和非模态窗口的语法以及如何控制新窗口的大小、位置和外观，接下来我们研究一下实际应用中更实用的功能：如何从caller页面传递数据到callee页面。
从caller页面传递给callee页面的数据分为3类：传递值、传递数组引用以及传递对象,它们都是通过showModalDialog()和showModelessDialog()的第2个参数实现的。
（一）传递值类型数据
在caller.htm页面中输入以下代码：






在callee.htm页面中输入以下代码：



在浏览器中打开caller.htm，点击任意一个按钮，我们将首先看到如下的提示信息框：
然后才出现新窗口。这种情况下，callee.htm页面中的window对象的属性dialogArguments将对应于caller.htm页面中的"打开了一个新模态窗口"或者"打开了一个新非模态窗口"。如果直接打开callee.htm，将会出现错误提示。
（二）传递数组引用类型数据
第一种值类型数据的传递中，在callee.htm页面中只能读取caller.htm页面的传递数据。当需要对caller.htm页面的传递内容进行修改时，就需使用到数组引用类型的传递方式。
首先，在caller.htm页面中输入以下代码：






然后在callee.htm页面中输入以下代码：



最后，在浏览器中打开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中输入以下代码：


传递对象数据

var sColor="";
function callDialog() {
showModelessDialog("callee.html",window,"status:false;dialogWidth:300px;dialogHeight:150px");
}
function update()
{
oColor.innerText = sColor;
}



输入你最喜欢的颜色: Yellow



在callee.htm中输入以下代码：


callee.html

function getInfoAndUpdate() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update();
}
function cancel() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = "Yellow";
callerWindowObj.update();
}



输入你最喜欢的颜色:






在浏览器中打开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页面中创建窗口的一个新技术。在实际应用中，模态对话框的功能比较实用，可用于必须让访问者阅读相关内容的情况下。另外，利用对象方式在窗口间传递数据，功能非常强大但使用却不复杂，是非常值得一用的技术。