windows弹窗案例

时间：2019-03-03 12:46:59 阅读：229 评论：0 收藏：0 [点我收藏+]

实现windows弹窗案例，需要两个窗口，一个是原窗口，另外一个是弹出的窗口

技术分享图片

一、原窗口：tanchuang.html

两个输入框，一个按钮，为按钮添加事件，使得点击按钮的同时弹出另外一个窗口

二、弹出窗口：user.html

有一个table，四行三列，每一行有一个按钮，为按钮添加点击事件使得点击按钮的同时同一行的内容能够自动输入到原窗口的两个输入框中，之后自动关闭此网页

实现过程：原窗口 tanchuang.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

页面效果：

新窗口：user.html

<BODY>
<TABLE border = "1" bordercolor = "black">
   <TR>
  <TD>操作</TD>
  <TD>编号</TD>
  <TD>姓名</TD>
   </TR>
   <TR>
  
  <TD><input type = "button" value = "选择" onclick = "s1(‘100‘,‘张三‘);"/></TD>
  <TD>100</TD>
  <TD>张三</TD>
   </TR>
   <TR>
  <TD><input type = "button" value = "选择" onclick = "s1(‘200‘,‘李四‘);"/></TD>
  <TD>200</TD>
  <TD>李四</TD>
   </TR>
   <TR>
  <TD><input type = "button" value = "选择" onclick = "s1(‘300‘,‘王五‘);"/></TD>
  <TD>300</TD>
  <TD>王五</TD>
   </TR>
</TABLE>
<script type = "text/javascript">
   // 传递两个参数
   function s1(num1,name1) {
//opener 跨页面的操作，得到创建这个窗口的窗口即 tanchuang.html
    var twin = window.opener;
    //获取到原窗口中Id值为"numid"的值并赋给它新的值
    twin.document.getElementById("numid").value = num1;
    //获取到原窗口中Id值为"nameid"的值并赋给它新的值
    twin.document.getElementById("nameid").value = name1;
    //关闭弹窗
    window.close();
   }
</script>
</BODY>
</HTML>

页面效果：