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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/system_obj/article/details/48754723

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

这里写图片描述
这个页面大家几乎都会使用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>
展开阅读全文

没有更多推荐了,返回首页