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

最新推荐文章于 2024-03-15 14:29:48 发布

dacainiao007

最新推荐文章于 2024-03-15 14:29:48 发布

阅读量9.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： input button html function 文档 javascript

本文链接：https://blog.youkuaiyun.com/dacainiao007/article/details/7879063

JavaWeb 专栏收录该内容

35 篇文章

订阅专栏

这篇博客介绍了如何在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>