showModalDialog
父窗口
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>a.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 </head> 10 <script language="JavaScript"> 11 12 </script> 13 14 <body> 15 <form name="form1" action="test.html" method="post" > 16 客户id: <input type="text" name="cid" value="" id="cid" ><br> 17 客户名称<input type="text" name="cname" value="" id="cname" > 18 <input type="button" name="ok" value="请选择客户" onclick="openWin();"/> 19 </form> 20 <script type="text/javascript"> 21 function openWin(){ 22 /* 23 * vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures]) 24 * 参数： 25 * sURL：要打开的窗口的页面。可以使用绝对路径，也可以使用相对路径 26 * vArguments：给sURL那个页面的窗口传递参数。 27 * sFeatures：控制打开的sURL那个页面的窗口的样式 28 */ 29 window.showModalDialog("a2.html",window,"help:no;status:no;dialogHeight:150px;dialogWidth:220px"); 30 } 31 function setValue(cid,cname){ 32 document.getElementById("cid").value = cid; 33 document.getElementById("cname").value = cname; 34 } 35 </script> 36 </body> 37 38 </html>
子窗口
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>a2.html</title> 5 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 6 <meta http-equiv="description" content="this is my page"> 7 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 8 </head> 9 <script language="JavaScript"> 10 </script> 11 <body> 12 <table border="1"> 13 <tr> 14 <td>操作</td> 15 <td>客户id</td> 16 <td>客户名称</td> 17 </tr> 18 19 <tr> 20 <td><input type="button" value="选择" id="ss" onclick="viewData('001','深圳华为')"></td> 21 <td>001</td> 22 <td>深圳华为</td> 23 </tr> 24 <tr> 25 <td><input type="button" value="选择" onclick="viewData('002','用友软件')"> </td> 26 <td>002</td> 27 <td>用友软件</td> 28 </tr> 29 </table> 30 <script type="text/javascript"> 31 function viewData(pid,pname){ 32 //如何得到之前的那个窗口对象 33 var parentWindow = window.dialogArguments; 34 parentWindow.setValue(pid,pname); 35 window.close(); 36 } 37 38 </script> 39 </body> 40 41 42 43 </html>
open
父窗口
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>a.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 </head> 10 <script language="JavaScript"> 11 12 13 </script> 14 15 <body> 16 <form name="form1" action="test.html" method="post" > 17 <select edu="edu" id="edu"> 18 <option value="本科">本科</option> 19 </select> 20 <input type="button" name="ok" value="添加" onclick="openWin();"/> 21 </form> 22 <script type="text/javascript"> 23 function openWin(){ 24 window.open("a2.html","_blank"); 25 } 26 //增加option元素 27 function setValue(name){ 28 //创建option 29 var optionElement = document.createElement("option");//<option></option> 30 //设置属性和内置文本 31 optionElement.setAttribute("value",name); 32 var textNode = document.createTextNode(name); 33 optionElement.appendChild(textNode); 34 //挂接到select上即可 35 document.getElementById("edu").appendChild(optionElement); 36 } 37 </script> 38 </body> 39 40 </html>
子窗口
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>a2.html</title> 5 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 6 <meta http-equiv="description" content="this is my page"> 7 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 8 </head> 9 <body> 10 <table border="1"> 11 12 <tr> 13 <td><input type="text" name="eduname" id="eduname" value="" size=8></td> 14 <td><input type="button" name="ok" value="确定" onclick="setData();"></td> 15 </tr> 16 17 </table> 18 <script type="text/javascript"> 19 function setData(){ 20 var eduName = document.getElementById("eduname").value; 21 //得到父窗口 22 var parentWindow = window.opener; 23 parentWindow.setValue(eduName); 24 window.close(); 25 } 26 27 </script> 28 </body> 29 30 31 32 </html>