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

CoderJu

墨衍会员 · AI 创作全网分发码龄11年

关注

原创最新推荐文章于 2026-03-05 03:59:27 发布 9k 阅读 AI 写同款· GEO 优化 ›

html H5 dialog弹窗学习，实现弹窗显示内容替代confirm、alert 阅读详情

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

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