一个使用Html做的简单的window弹窗案例

最新推荐文章于 2024-05-09 15:49:59 发布

CoderJu

最新推荐文章于 2024-05-09 15:49:59 发布

阅读量8.7k

点赞数 1

分类专栏： HTML 文章标签： html 代码弹窗

本文为博主原创文章，转载请注明出处！谢谢！！！

本文链接：https://blog.csdn.net/system_obj/article/details/48754723

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第一个简单页面如下图所示：

这里写图片描述
这个页面大家几乎都会使用Html做的名为window.html的页面，这里就直接写出代码如下：

<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  姓名：<input type="text" id="name"/><br/>
  编号：<input type="text" id="id"/><br/>
  <input type = "button" value ="选择" onclick = "open1();"/>
  <script type="text/javascript">
    function open1(){
    window.open("user.html","","with=100, height = 50")
    }//打开名为user.html的弹窗

  </script>
 </body>
</html>

点击选择后，会打开名为user.html的弹窗,user.html的现实内容为所需要输入的数据，页面情况如下：
这里写图片描述
点击选择后，姓名和编号会返回到window.html的页面中去，并且关闭弹窗，其代码如下：

<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <table border="1" bordercolor="green">
  <tr>
    <td>操作</td>
    <td>姓名</td>
    <td>编号</td>
  </tr>
  <tr>
    <td> <input type = "button" value ="选择" onclick = "get1('东方','101');"/></td>
    <td>东方</td>
    <td>101</td>
  </tr>
  <tr>
    <td> <input type = "button" value ="选择" onclick = "get1('小米','102');"/></td>
    <td>小米</td>
    <td>102</td>
  </tr>
  <tr>
    <td> <input type = "button" value ="选择" onclick = "get1('大米','103');"/></td>
    <td>大米</td>
    <td>103</td>
  </tr>
  </table>
 </body>
 <script type ="text/javascript">
    function get1(name1,num1)
    {
        var p = window.opener;
        p.document.getElementById("name").value=name1;
        p.document.getElementById("id").value=num1;
        window.close();
    }
 </script>
</html>