弹出窗口【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
2
<html>
3
<head>
4
<title>a.htmltitle>
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
2
<html>
3
<head>
4
<title>a2.htmltitle>
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>客户idtd>
17
<td>客户名称td>
18
tr>
19
20
<tr>
21
<td><input type="button" value="选择" onclick="setData('001','深圳华为')">td>
22
<td>001td>
23
<td>深圳华为td>
24
tr>
25
<tr>
26
<td><input type="button" value="选择" onclick="setData('002','用友软件')"> td>
27
<td>002td>
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
2
<html>
3
<head>
4
<title>a.htmltitle>
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
2
<html>
3
<head>
4
<title>a2.htmltitle>
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
2
<html>
3
<head>
4
<title>a.htmltitle>
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
2
<html>
3
<head>
4
<title>a2.htmltitle>
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>客户idtd>
14
<td>客户名称td>
15
tr>
16
17
<tr>
18
<td><input type="button" value="选择" id="ss" onclick="setData('001','深圳华为')">td>
19
<td>001td>
20
<td>深圳华为td>
21
tr>
22
<tr>
23
<td><input type="button" value="选择" onclick="setData('002','用友软件')"> td>
24
<td>002td>
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>