js弹出一个新窗口进行选择并且返回这个页面的值-showModalDialog

这篇博客介绍了如何在JavaScript中使用showModalDialog方法弹出一个模态对话框,展示一个新页面(a2.html),并在用户选择数据后将值回传到原始页面(a1.html)。用户点击按钮后,会打开a2.html,选择客户后调用viewData函数,将客户ID和名称传递给a1.html并关闭对话框。在a1.html中,setValue函数用于设置输入字段的值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!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">
	    function openWin(){
		
		 /*
		  * 
		  * window . showModalDialog ( sURL , vArguments , sFeatures )    建立模式对话框显示指定的文档
		  *          
		  * * sURL:必选项,指定要载入和显示的 URL.
		  * * vArguments:指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值,包括包含多个值得的数组。
		  *               对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。 
		  *               window:把a1.html页面的window对象传递到a2.html页面上
		  *  * sFeatures可选项。指定对话框的窗口装饰。多个值之间用分号隔开。  
		  */
		   //window.showModalDialog("a2.html",window,"dialogHeight:10;dialogWidth:20;help:no");	
		   
		   //建立无模式对话框显示指定的文档,就是前面弹出一个网页在后面还能够更改。
	       window.showModelessDialog("a2.html",window,"dialogHeight:10;dialogWidth:20;help:no");	
	 
	}
	
	function setValue(cid, cname){
	   /*
	    *  <input type="text" name="cid" value=""  id="cid"  >
		  <input type="text" name="cname" value=""  id="cname"  >
	    */
	   document.getElementById("cid").value=cid;
	   document.getElementById("cname").value=cname;
	   
	
	}	
  </script>
  
  <body>
	   <form name="form1" action="test.html" method="post" >
  	   	  <input type="text" name="cid" value=""  id="cid"  >
		  <input type="text" name="cname" value=""  id="cname"  >
		  <input type="button" name="ok" value="请选择客户" onclick="openWin()" />
  	   </form>
</body>
  
</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(cid,cname){
		//获取a1.html对象window对象
		//对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。 
		
		//a1.html页面的window对象在a2.html页面上被封装到dialogArguments属性中
		var sdata=window.dialogArguments;
		
		//调用a1.html页面的函数
        sdata.setValue(cid,cname);
		window.close();
	 }
	
  </script>
  <body>
  	   <table border="1">
  	   	  <tr>
  	   	  	<td>操作</td>
			<td>客户id</td>
			<td>客户名称</td>
  	   	  </tr>
		  
		  <tr>
  	   	  	<td><input type="button" value="选择" 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>


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值