js的window弹窗案例
实现过程:
1.创建一个页面window.html
(1) 有两个输入项和一个按钮;
(2) 按钮上有一个事件,弹出一个新窗口;
window对象的open()方法用来打开一个新窗口,window.open("打开的新窗口的地址", "","窗口的特性");
window.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的window弹窗案例</title>
</head>
<body>
学号:<input type="text" id="stuNum" value=""/><br/>
姓名:<input type="text" id="stuName" value=""/><br/>
<input type="button" value="选择" onclick="openFun();"/>
<script type="text/javascript">
function openFun(){
window.open("student.html", "", "width=250,height=150");
}
</script>
</body>
</html>
2.创建弹出窗口
(1) 创建一个表格,表格的每一行有学号,姓名和一个按钮
(2) 按钮上有一个事件,把当前窗口的学号和姓名,赋值到父窗口的相应位置
student.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息</title>
</head>
<body>
<table border="1">
<tr>
<td>学号</td>
<td>姓名</td>
<td>操作</td>
</tr>
<tr>
<td>0010</td>
<td>allan</td>
<td>
<input type="button" value="选择" onclick="selectFun('0010','allan');"/>
</td>
</tr>
<tr>
<td>0011</td>
<td>bella</td>
<td>
<input type="button" value="选择" onclick="selectFun('0011','bella');"/>
</td>
</tr>
<tr>
<td>0012</td>
<td>wlx</td>
<td>
<input type="button" value="选择" onclick="selectFun('0012','wlx');"/>
</td>
</tr>
</table>
<script type="text/javascript">
function selectFun(num,name){
// 得到创建子窗口的父窗口
var parent_window = window.opener;
parent_window.document.getElementById("stuNum").value = num;
parent_window.document.getElementById("stuName").value = name;
// 关闭窗口
window.close();
}
</script>
</body>
</html>
3.效果如下: