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

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

一个使用Html做的简单的window弹窗案例_第1张图片
这个页面大家几乎都会使用Html做的名为window.html的页面,这里就直接写出代码如下:

<html>
 <head>
  <title>Documenttitle>
 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的现实内容为所需要输入的数据,页面情况如下:
一个使用Html做的简单的window弹窗案例_第2张图片
点击选择后,姓名和编号会返回到window.html的页面中去,并且关闭弹窗,其代码如下:

<html>
 <head>
  <title>Documenttitle>
 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>101td>
  tr>
  <tr>
    <td> <input type = "button" value ="选择" onclick = "get1('小米','102');"/>td>
    <td>小米td>
    <td>102td>
  tr>
  <tr>
    <td> <input type = "button" value ="选择" onclick = "get1('大米','103');"/>td>
    <td>大米td>
    <td>103td>
  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>

你可能感兴趣的:(HTML)