JavaScript弹窗案例

最新推荐文章于 2022-01-30 22:54:57 发布

liuByte

最新推荐文章于 2022-01-30 22:54:57 发布

阅读量270

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_23175673/article/details/106265049

版权

需求：

需求    1.创建一个页面（window.html）
            有两个输入项和一个按钮
            按钮上有一个事件，弹出一个新窗口 open

    2.创建弹出页面(user.html)
            表格
            每一行有一个按钮、编号和姓名
            按钮上有一个事件，把当前的编号和姓名赋值到第一个页面相应的位置

window.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window</title>
</head>
<body>
    编号：<input type="text" id="zzzid" /><br/>
    姓名：<input type="text" id="namid" /><br/>
    <input type="button" value="choose" onclick="cbz1()"/>
    <script type="text/javascript">
        //实现窗口弹出的方法
        function cbz1(){
            //open方法
            window.open("user.html","","width=200,height=300");
        }
    </script>

</body>
</html>

user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>user</title>
</head>
<body>
    <table border="1" bordercolor="blue">
        <tr>
            <td>操作</td>
            <td>编号</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td><input type="button" value="选择" onclick="s1('95','CC')"/></td>
            <td>95</td>
            <td>CC</td>
        </tr>
        <tr>
            <td><input type="button" value="选择" onclick="s1('08','BB')"/></td>
            <td>08</td>
            <td>BB</td>
        </tr>
        <tr>
            <td><input type="button" value="选择" onclick="s1('22','ZZ')"/></td>
            <td>22</td>
            <td>ZZ</td>
        </tr>
    </table>
<script type="text/javascript">
    function s1(num1,name1){
        //需要把num1和name1赋值到window.html页面
        //跨页面的操作 opener:得到创建这个窗口的窗口，即window.html页面
        var pwin = window.opener;
        pwin.document.getElementById("zzzid").value = num1;
        pwin.document.getElementById("namid").value = name1;
        //关闭user.html
        window.close();
    }
</script>
</body>
</html>

效果：
在这里插入图片描述

liuByte

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript弹窗案例

需求：需求 1.创建一个页面（window.html）有两个输入项和一个按钮按钮上有一个事件，弹出一个新窗口 open 2.创建弹出页面(user.html) 表格每一行有一个按钮、编号和姓名按钮上有一个事件，把当前的编号和姓名赋值到第一个页面相应的位置window.html<!DOCTYPE html><html lang="en"&g
复制链接

扫一扫