javascript 之模态（Modal) 父子窗口交互

来源：互联网发布：mac装win7好不好编辑：程序博客网时间：2024/06/01 20:52

父窗口：a1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>a.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head>  <script language="JavaScript">  </script>    <body>   <form name="form1" action="test.html" method="post" >      客户id: <input type="text" name="cid" value=""  id="cid"  ><br> 客户名称<input type="text" name="cname" value=""  id="cname"  >  <input type="button" name="ok" value="请选择客户" onclick="openWin();"/>     </form></body> <script language="JavaScript"> function openWin(){//showModalDialog：建立有模式的对话框，弹出a2.html页面后不能再操作a1.html页面的内容//window.showModalDialog("./a2.html",window,"status:no;resizable:yes;dialogHeight:210px;dialogWidth:360px;unadorne:yes");//showModelessDialog：建立无模式对话框，弹出a2.html页面后能在操作a1.html页面的内容window.showModelessDialog("./a2.html",window,"status:no;resizable:yes;dialogHeight:210px;dialogWidth:360px;unadorne:yes");}function setValues(id,name){/** * 客户id: <input type="text" name="cid" value=""  id="cid"  ><br>   客户名称<input type="text" name="cname" value=""  id="cname"  > */document.getElementById("cid").value = id;document.getElementById("cname").value = name;} </script></html>

子窗口：a2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>a2.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head>   <script language="JavaScript">      function viewData(id,name){      var dialogElement = window.dialogArguments;   dialogElement.setValues(id,name);   window.close();   }  </script>  <body>     <table border="1">       <tr>       <td>操作</td><td>客户id</td><td>客户名称</td>       </tr>    <tr>       <td><input type="button" value="选择" id="ss" onclick="viewData('001','深圳华为')"></td><td>001</td><td>深圳华为</td>       </tr>  <tr>       <td><input type="button" value="选择"   onclick="viewData('002','用友软件')"> </td><td>002</td><td>用友软件</td>       </tr>     </table>  </body>     </html>

还可以在子窗口中直接获得并操作父窗口的组件：

function viewData(id,name){   //实现2个页面中的调用var dialogElement = window.dialogArguments;/** * 对a1.html的2个文本框赋值 * a1.html * 客户id: <input type="text" name="cid" value=""  id="cid"  ><br>   客户名称<input type="text" name="cname" value=""  id="cname"  > */dialogElement.document.getElementById("cid").value = id;dialogElement.document.getElementById("cname").value = name;//关闭当前对口框window.close();   }

javascript 之 模态（Modal) 父子窗口交互

javascript 之模态（Modal) 父子窗口交互