本文介绍如何使用window.showModalDialog创建弹出子窗口，并通过示例演示如何在父窗口与子窗口间传递参数及返回值。
window.showModalDialog用法
在实际的开发过程当中像window.showModalDialog弹出子窗体是非常常用的，今天写了一个DEMO
一。新建一个父窗体的页面 ParentWeb.aspx
1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ParentWeb.aspx.cs" Inherits="ParentWeb" %>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" >
4<head runat="server">
5 <title>父窗体----学生信息录入</title>
6 <script language="javascript">
7 //打开新的子窗体
8 function OpentChild()
9 {
10
var parmName = document.getElementById("txtName").value;
11 var parmAge = document.getElementById("txtAge").value;
12 var arrArgs = new Array(parmName, parmAge);
13 var winSettings = "center:yes;resizable:no;dialogHeight:300px";
14 var arrArgs = window.showModalDialog("ChildWeb.aspx",arrArgs,winSettings);
15 //下面的可以支持返回多个值[window.returnValue]
16 if(arrArgs==null)
17
{
18 alert("Nothing returned from ChildWeb!");
19
}
20 else
21 {
22 document.getElementById("txtName").value = arrArgs[0].toString();
23 document.getElementById("txtAge").value = arrArgs[1].toString();
// window.location.reload(); 刷新父窗体
24 }
25
26
}
27 </script>
28</head>
29<body>
30 <form id="frmParent" runat="server">
31 <div>
32 姓名：<input type="text" value="" id="txtName" /><br />
33 年龄：<input type="text" value="" id="txtAge" /><br />
34 <input id="btnSubmit" type="button" value="Submit" onclick="return OpentChild();" />
35 </div>
36 </form>
37</body>
38</html>
39
二。新建一个子窗体
ChildWeb.aspx
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ChildWeb.aspx.cs" Inherits="ChildWeb" %>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4<html xmlns="http://www.w3.org/1999/xhtml" >
5<head runat="server">
6 <title>子窗体----更新信息</title>
7 <script language="javascript">
8 //初始化子窗体
9 function InitPage()
10 {
11 var myArgs = new Array();
12 myArgs = window.dialogArguments;
13 document.getElementById("txtName1").value = myArgs[0].toString();
14 document.getElementById("txtAge1").value = myArgs[1].toString();
15 }
16 //返回父窗体
17 function BackValue()
18 {
19 var name = document.getElementById("txtName1").value;
20 var age = document.getElementById("txtAge1").value;
21 var arrArgs = new Array(name, age);
22 window.returnValue = arrArgs;
23 window.close();
24 }
25 </script>
26</head>
27<body onload="return InitPage();">
28 <form id="frmChild" runat="server">
29 <div>
30 姓名：<input type="text" value="" id="txtName1" /><br />
31 年龄：<input type="text" value="" id="txtAge1" /><br />
32 <input id="btnSubmit" type="button" value="Submit" onclick="return BackValue();" />
33 </div>
34 </form>
35</body>
36</html>
37
一。新建一个父窗体的页面 ParentWeb.aspx
1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ParentWeb.aspx.cs" Inherits="ParentWeb" %>2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">3
<html xmlns="http://www.w3.org/1999/xhtml" >4
<head runat="server">5
<title>父窗体----学生信息录入</title>6
<script language="javascript">7
//打开新的子窗体8
function OpentChild()9
{10
var parmName = document.getElementById("txtName").value;11
var parmAge = document.getElementById("txtAge").value;12
var arrArgs = new Array(parmName, parmAge);13
var winSettings = "center:yes;resizable:no;dialogHeight:300px"; 14
var arrArgs = window.showModalDialog("ChildWeb.aspx",arrArgs,winSettings);15
//下面的可以支持返回多个值[window.returnValue]16
if(arrArgs==null)17
{18
alert("Nothing returned from ChildWeb!");19
}20
else21
{22
document.getElementById("txtName").value = arrArgs[0].toString();23
document.getElementById("txtAge").value = arrArgs[1].toString();// window.location.reload(); 刷新父窗体
24
}25
26
}27
</script>28
</head>29
<body>30
<form id="frmParent" runat="server">31
<div>32
姓名：<input type="text" value="" id="txtName" /><br />33
年龄：<input type="text" value="" id="txtAge" /><br />34
<input id="btnSubmit" type="button" value="Submit" onclick="return OpentChild();" />35
</div>36
</form>37
</body>38
</html>39
1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ChildWeb.aspx.cs" Inherits="ChildWeb" %>2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">3
4
<html xmlns="http://www.w3.org/1999/xhtml" >5
<head runat="server">6
<title>子窗体----更新信息</title>7
<script language="javascript">8
//初始化子窗体9
function InitPage()10
{11
var myArgs = new Array();12
myArgs = window.dialogArguments;13
document.getElementById("txtName1").value = myArgs[0].toString();14
document.getElementById("txtAge1").value = myArgs[1].toString();15
}16
//返回父窗体17
function BackValue()18
{ 19
var name = document.getElementById("txtName1").value;20
var age = document.getElementById("txtAge1").value; 21
var arrArgs = new Array(name, age); 22
window.returnValue = arrArgs;23
window.close();24
}25
</script>26
</head>27
<body onload="return InitPage();">28
<form id="frmChild" runat="server">29
<div>30
姓名：<input type="text" value="" id="txtName1" /><br />31
年龄：<input type="text" value="" id="txtAge1" /><br />32
<input id="btnSubmit" type="button" value="Submit" onclick="return BackValue();" />33
</div>34
</form>35
</body>36
</html>37
扫一扫
678
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
