JavaScrip高级应用：操作模态与非模态对话框
2011-12-16 08:22
260 查看
JavaScrip高级应用：操作模态与非模态对话框
_http://blog.chinaunix.net/u/13791/showart.php?id=78478
本文的所有例程中，从层次上涉及到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页面的对话框窗口。这回有所不同，鼠标可以转移到其他
地方使另外的窗口成为“当前活动”状态，这就是非模态的概念。
从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页面中创建窗口的一个新技术。在实际应用中，模态对话框的功能比较
实用，可用于必须让访问者阅读相关内容的情况下。另外，利用对象方式在窗口间
传递数据，功能非常强大但使用却不复杂，是非常值得一用的技术。
_*JavaScript*模式*对话框*实现及*参数*传递的简单例子_
_javascript三种对话框使用方法
http://www.zhisi.net/Article/2007/200712/Article7658.html
求教关于javascript对话框赋值给父页面的问题
http://www.shendo.cn/asptech/article/show.asp?id=15010
JavaScript窗口功能指南之创建对话框
http://www.dedecms.com/web-art/htmlbase/Javascript/20020322/30234.html
<http://www.dedecms.com/web-art/htmlbase/ /20020322/30234.html>
Javascript中使用对话框，在对话框关闭时刷新前页面的方法
http://group.qqread.com/archiver/tid-22249.html
JavaScript 模式对话框实现及参数传递的简单例子_
http://bbs.51js.com/thread-62213-1-1.html_ _对话框中用了框架传递不了
主窗口的参数了
http://www.blueidea.com/tech/web/2003/1206.asp *showModelessDialog()使
用详解*
http://hi.baidu.com/postmasters/blog/item/ce7f4d27808a1500918f9daf.html
_http://blog.chinaunix.net/u/13791/showart.php?id=78478
本文的所有例程中，从层次上涉及到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页面的对话框窗口。这回有所不同，鼠标可以转移到其他
地方使另外的窗口成为“当前活动”状态，这就是非模态的概念。
从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页面中创建窗口的一个新技术。在实际应用中，模态对话框的功能比较
实用，可用于必须让访问者阅读相关内容的情况下。另外，利用对象方式在窗口间
传递数据，功能非常强大但使用却不复杂，是非常值得一用的技术。
_*JavaScript*模式*对话框*实现及*参数*传递的简单例子_
_javascript三种对话框使用方法
http://www.zhisi.net/Article/2007/200712/Article7658.html
求教关于javascript对话框赋值给父页面的问题
http://www.shendo.cn/asptech/article/show.asp?id=15010
JavaScript窗口功能指南之创建对话框
http://www.dedecms.com/web-art/htmlbase/Javascript/20020322/30234.html
<http://www.dedecms.com/web-art/htmlbase/ /20020322/30234.html>
Javascript中使用对话框，在对话框关闭时刷新前页面的方法
http://group.qqread.com/archiver/tid-22249.html
JavaScript 模式对话框实现及参数传递的简单例子_
http://bbs.51js.com/thread-62213-1-1.html_ _对话框中用了框架传递不了
主窗口的参数了
http://www.blueidea.com/tech/web/2003/1206.asp *showModelessDialog()使
用详解*
http://hi.baidu.com/postmasters/blog/item/ce7f4d27808a1500918f9daf.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScrip高级应用：操作模态与非模态对话框
- JavaScrip高级应用：操作模态与非模态对话框
- JavaScrip高级应用：操作模态与非模态对话框
- JavaScrip高级应用：操作模态与非模态对话框
- JavaScrip高级应用：操作模态与非模态对话框
- JavaScrip高级应用：操作模态与非模态对话框(转)
- JavaScrip高级应用：操作模态与非模态对话框
- 接:JavaScrip高级应用：操作模态与非模态对话框
- JS高级应用:操作模态与非模态对话框
- JS高级应用:操作模态与非模态对话框
- JS高级应用:操作模态与非模态对话框
- 【转载】javaScrip高级应用：玩转模态与非模态
- NoSQL数据库之Redis数据库管理六(Redis的高级应用之事务处理、持久化操作、pub_sub、虚拟内存)
- 操作模态与非模态对话框
- Redis 笔记与总结6 Redis 高级应用之 事务处理、持久化操作、pub_sub、虚拟内存
- C#字符串和正则表达式..[.net的应用]..字符串操作高级技术
- JS-DOM操作应用高级（二）
- c++和Python互操作高级应用（5）
- MySql数据库数据更新操作其高级应用
- Round #172 (Div. 2) D. Maximum Xor Secondary——栈的高级应用消除冗余操作