JavaScript的window弹窗案例

window弹窗案例

一、需求分析:

1.创建一个页面
**有两个输入项和一个按钮
**在按钮上面有一个事件:弹出一个新窗口
2.创建弹出页面
**表格
**每一行一个按钮,姓名和编号
**按钮对应一个事件:帮当前编号和姓名赋值到第一个页面相应的位置


二、实现过程

1.新建window.html文件:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹窗案例title>
head>
<body>
编号:<input type="text" id="num1" /><br>
姓名:<input type="text" id="name1"/><br>
<input type="button" value="选择" onclick="open1()"/>
<script type="text/javascript">
    function open1(){
        window.open("users.html","","width=250,height=200");
    }
script>
body>
html>

2.新建users.html文件:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表title>
head>
<body>
    <table border="1"  cellspacing="0">
        <tr>
            <td>操作td>
            <td>编号td>
            <td>姓名td>
        tr>
        <tr>
            <td><input type="button" value="选择" onclick="s1('001','小一');" />td>
            <td>001td>
            <td>小一td>
        tr>
        <tr>
            <td><input type="button" value="选择" onclick="s1('002','小二');" />td>
            <td>002td>
            <td>小二td>
        tr>
        <tr>
            <td><input type="button" value="选择" onclick="s1('0013','小三');" />td>
            <td>003td>
            <td>小三td>
        tr>
    table>
<script type="text/javascript">
    //实现s1方法
    function s1(num,name){
        //需要把num1和name1的值赋值到window页面
        //跨页面的操作 opener:得到创建这个窗口的窗口
        var winOr = window.opener;
        winOr.document.getElementById("num1").value = num;
        winOr.document.getElementById("name1").value = name;
        //关闭窗口
        window.close();
    }
script>
body>
html>

三、运行结果

JavaScript的window弹窗案例_第1张图片

你可能感兴趣的:(Web)