弹出窗口【DOM】
方案一：（推荐）
语法：
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
参数说明：
sURL 给要打开的窗口指定要加载和显示的文档的URL的字符串，可以使用相对路径，也可以使用绝对路径
sName 窗口出现的位置：_blank新窗口 _self当前窗口
sFeatures 给打开的那个sURL窗口设置样式，字符串形式，属性=值，不同属性之间用逗号间隔
注意：
对话框通过var parentWindow = window.opener获取打开它的窗口（父窗口）
对话框通过parentWindow.函数()来调用父窗口中的函数
对话框通过parentWindow.document.getElementById("id")等方法获取父窗口中的节点
例如：
1
window.open("a2.html", "_blank", "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
案例1：
演示：
代码：
a1.html
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>a.html</title>
5
6
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7
<meta http-equiv="description" content="this is my page">
8
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
9
</head>
10
<script language="JavaScript">
11
12
13
</script>
14
15
<body>
16
<form name="form1" action="test.html" method="post" >
17
客户id: <input type="text" name="cid" value="" id="cid" ><br>
18
客户名称<input type="text" name="cname" value="" id="cname" >
19
<input type="button" name="ok" value="请选择客户" onclick="openWin();"/>
20
</form>
21
<script type="text/javascript">
22
function openWin(){
23
/*
24
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
25
参数：
26
sURL 给要打开的窗口指定要加载和显示的文档的URL的字符串，可以使用相对路径，也可以使用绝对路径
27
sName 窗口出现的位置：_blank新窗口 _self当前窗口
28
sFeatures 给打开的那个sURL窗口设置样式
29
*/
30
window.open("a2.html", "_blank", "status=no,toolbar=no,menubar=no,location=no,height=500px,width=400px,top=150px,left=200px");
31
}
32
function setValue(cid, cname){
33
document.getElementById("cid").value = cid;
34
document.getElementById("cname").value = cname;
35
}
36
</script>
37
</body>
38
39
</html>
弹出窗a2.html
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>a2.html</title>
5
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
6
<meta http-equiv="description" content="this is my page">
7
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
8
</head>
9
<script language="JavaScript">
10
11
</script>
12
<body>
13
<table border="1">
14
<tr>
15
<td>操作</td>
16
<td>客户id</td>
17
<td>客户名称</td>
18
</tr>
19
20
<tr>
21
<td><input type="button" value="选择" onclick="setData('001','深圳华为')"></td>
22
<td>001</td>
23
<td>深圳华为</td>
24
</tr>
25
<tr>
26
<td><input type="button" value="选择" onclick="setData('002','用友软件')"> </td>
27
<td>002</td>
28
<td>用友软件</td>
29
</tr>
30
</table>
31
<script type="text/javascript">
32
function setData(did, dname){
33
//得到父窗口
34
var parentWindow = window.opener;
35
//给父窗口中的输入框设置值
36
// parentWindow.document.getElementById("cid").value = did;
37
// parentWindow.document.getElementById("cname").value = dname;
38
parentWindow.setValue(did, dname);
39
//关闭当前窗口
40
window.close();
41
}
42
</script>
43
</body>
44
</html>
案例2：
演示：
代码：
a1.html
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>a.html</title>
5
6
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7
<meta http-equiv="description" content="this is my page">
8
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
9
</head>
10
<script language="JavaScript">
11
12
13
</script>
14
15
<body>
16
<form name="form1" action="test.html" method="post" >
17
<select edu="edu" id="edu">
18
<option value="本科">本科</option>
19
</select>
20
<input type="button" name="ok" value="添加" onclick="openWin();"/>
21
</form>
22
23
<script type="text/javascript">
24
function openWin(){
25
//打开新窗口中的内容
26
window.open("a2.html", "_blank", "resizable=yes,height=150px,width=300px,left=200px,top=100px");
27
}
28
29
//给下拉框添加下拉选项
30
function addOption(optionValue){
31
//增加option元素节点
32
var option_node = document.createElement("option");
33
//设置value属性值为传入的optionValue参数
34
option_node.setAttribute("value", optionValue);
35
//增加文本节点
36
var text_node = document.createTextNode(optionValue);
37
//将文本节点追加到option元素节点下面
38
option_node.appendChild(text_node);
39
//在select元素上追加option元素
40
document.getElementById("edu").appendChild(option_node);
41
}
42
43
</script>
44
</body>
45
46
</html>
弹出框a2.html
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>a2.html</title>
5
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
6
<meta http-equiv="description" content="this is my page">
7
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
8
</head>
9
<body>
10
<table border="1">
11
12
<tr>
13
<td><input type="text" name="eduname" id="eduname" value="" size=20></td>
14
<td><input type="button" value="添加学历" onclick="setData()"></td>
15
</tr>
16
</table>
17
18
<script type="text/javascript">
19
function setData(){
20
//获取父类窗口
21
var parentWindow = window.opener;
22
//获取此窗口document中输入框中输入的值
23
var eduname = document.getElementById("eduname").value;
24
//调用父类窗口中的js函数，给其中的下拉框增加option元素和对应的文本元素
25
parentWindow.addOption(eduname);
26
//关闭此窗口
27
window.close();
28
}
29
</script>
30
</body>
31
</html>
方案二：（不推荐，兼容性极差）
语法：
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
参数说明：
sURL 给要打开的窗口指定要加载和显示的文档的URL的字符串，可以使用相对路径，也可以使用绝对路径vArguments 可选参数，用来向sURL地址对应的对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。sFeatures 给打开的那个sURL窗口设置样式，字符串形式，属性:值，不同属性之间用分号间隔。
注意：
对话框通过window.dialogArguments;获取打开它的窗口（父窗口）传递过来的参数。
例如：
1
window.showModelessDialog("a2.html", window, "dialogHeight:200px;resizable:yes;dialogLeft:150px;dialogTop:150px;");
案例：
演示：
代码：
a1.html
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>a.html</title>
5
6
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7
<meta http-equiv="description" content="this is my page">
8
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
9
</head>
10
11
<body>
12
<form name="form1" action="test.html" method="post" >
13
客户id: <input type="text" name="cid" value="" id="cid" ><br>
14
客户名称<input type="text" name="cname" value="" id="cname" >
15
<input type="button" name="ok" value="请选择客户" onclick="openWin();"/>
16
</form>
17
<script type="text/javascript">
18
function openWin(){
19
/*
20
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
21
参数：
22
sURL 给要打开的窗口指定要加载和显示的文档的URL的字符串，可以使用相对路径，也可以使用绝对路径
23
vArguments 给sURL的那个窗口传递参数
24
sFeatures 给打开的那个sURL窗口设置样式
25
*/
26
window.showModelessDialog("a2.html", window, "dialogHeight:200px;resizable:yes;dialogLeft:150px;dialogTop:150px;");
27
}
28
function setValue(cid, cname){
29
document.getElementById("cid").value = cid;
30
document.getElementById("cname").value = cname;
31
}
32
</script>
33
</body>
34
35
</html>
弹出窗a2.html
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>a2.html</title>
5
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
6
<meta http-equiv="description" content="this is my page">
7
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
8
</head>
9
<body>
10
<table border="1">
11
<tr>
12
<td>操作</td>
13
<td>客户id</td>
14
<td>客户名称</td>
15
</tr>
16
17
<tr>
18
<td><input type="button" value="选择" id="ss" onclick="setData('001','深圳华为')"></td>
19
<td>001</td>
20
<td>深圳华为</td>
21
</tr>
22
<tr>
23
<td><input type="button" value="选择" onclick="setData('002','用友软件')"> </td>
24
<td>002</td>
25
<td>用友软件</td>
26
</tr>
27
</table>
28
<script type="text/javascript">
29
function setData(did, dname){
30
//得到之前的那个窗口对象
31
var parentWindow = window.dialogArguments;
32
// parentWindow.document.getElementById("cid").value = did;//父窗口的cid设置值
33
// parentWindow.document.getElementById("cname").value = dname;//父窗口的cname设置值
34
//调用父类窗口中的函数，为父类窗口中的输入框设置值
35
parentWindow.setValue(did, dname);
36
window.close();
37
}
38
</script>
39
</body>
40
41
</html>