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.效果如下:

js的window弹窗案例