在浏览器中弹出模式对话框

 项目中有时候需要通过在浏览器中弹出模式对话框，让用户在对话框中选择，确定后能在父窗口指定的字段填写上用户在对话框中选择的值。可以先使用js定义如下方法：

Js代码  

1. /**  
2.  * 弹出一个对话框用于选择代码  
3.  * @param codeTableName 代码的名称，例如proType  
4.  * @param width 弹出对话框的宽度  
5.  * @param height 弹出对话框的高度  
6.  * @param labelId 用于显示该代码编号的html元素id，该元素用于向后台传实际代码编号，例如”01“  
7.  * @param valueId 用于显示该代码意义的html元素id，该元素用于在前台显示该代码实际代表的字符串，例如”电影“  
8.  * @return  
9.  *   
10.  * 例子：  
11.  * <script>  
12.  *  var contextPath = "${pageContext.request.contextPath}";//通过这个把路径传过去  
13.  * </script>  
14.  * <s:hidden name="userProductDuty.dutyCode" id="dutyCode_valueId"></s:hidden>  
15.     <s:textfield  name="dutyCode_label" id="dutyCode_labelId" cssClass="textNoSize" cssStyle="width:150px;" label="责任者方式" labelposition="left" labelSeparator=":" required="true"   
16.         size="5" value="%{codeList.{?#this.codeTableName=='dutyCode'&&#this.codeNumber==#request['userProductDuty.dutyCode']}.{codeMean}[0]}"  
17.         οnclick="chooseCodeNumber(contextPath,'dutyCode','400','300','dutyCode_labelId','dutyCode_valueId')">  
18.     </s:textfield>  
19.     注意上面那个隐藏字段的命名  
20.  */  
21. function chooseCodeNumber(pageContextPath,codeTableName,width,height,labelId,valueId) {   
22.         var codeMean = document.getElementById(labelId).value;   
23.         var codeNumber = document.getElementById(valueId).value;   
24.         var rtValue = showModalDialog(   
25.                 pageContextPath + '/admin/security/code/popCommonCode.action?filter_codeTableName='+codeTableName + "&selectedNumberId=" + codeNumber   
26.                 ,'code chooser',   
27.                 'dialogWidth:' + width + 'px;dialogHeight:' + height + 'px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes');   
28.         if(rtValue != null && rtValue.length > 0) {   
29.             document.getElementById(labelId).value = rtValue[1];   
30.             document.getElementById(valueId).value = rtValue[0];   
31.         }   
32.     }  

/**
 * 弹出一个对话框用于选择代码
 * @param codeTableName 代码的名称，例如proType
 * @param width 弹出对话框的宽度
 * @param height 弹出对话框的高度
 * @param labelId 用于显示该代码编号的html元素id，该元素用于向后台传实际代码编号，例如”01“
 * @param valueId 用于显示该代码意义的html元素id，该元素用于在前台显示该代码实际代表的字符串，例如”电影“
 * @return
 * 
 * 例子：
 * <script>
 * 	var contextPath = "${pageContext.request.contextPath}";//通过这个把路径传过去
 * </script>
 * <s:hidden name="userProductDuty.dutyCode" id="dutyCode_valueId"></s:hidden>
	<s:textfield  name="dutyCode_label" id="dutyCode_labelId" cssClass="textNoSize" cssStyle="width:150px;" label="责任者方式" labelposition="left" labelSeparator=":" required="true" 
		size="5" value="%{codeList.{?#this.codeTableName=='dutyCode'&&#this.codeNumber==#request['userProductDuty.dutyCode']}.{codeMean}[0]}"
		οnclick="chooseCodeNumber(contextPath,'dutyCode','400','300','dutyCode_labelId','dutyCode_valueId')">
	</s:textfield>
	注意上面那个隐藏字段的命名
 */
function chooseCodeNumber(pageContextPath,codeTableName,width,height,labelId,valueId) {
		var codeMean = document.getElementById(labelId).value;
		var codeNumber = document.getElementById(valueId).value;
		var rtValue = showModalDialog(
				pageContextPath + '/admin/security/code/popCommonCode.action?filter_codeTableName='+codeTableName + "&selectedNumberId=" + codeNumber
				,'code chooser',
				'dialogWidth:' + width + 'px;dialogHeight:' + height + 'px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes');
		if(rtValue != null && rtValue.length > 0) {
			document.getElementById(labelId).value = rtValue[1];
			document.getElementById(valueId).value = rtValue[0];
		}
	}

注意到这里使用的方法是：

Js代码  

1. showModalDialog(url,[, vArguments] [, sFeatures])  

showModalDialog(url,[, vArguments] [, sFeatures])

其中参数如下，
url
代表要在该对话框中加载的url地址，注意到我们项目中加载的是action；
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数（这里开始我不知道是干嘛用的，就随便传了个值==b）。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
　　dialogWidth: 对话框宽度。
　　dialogLeft: 距离桌面左的距离。
　　dialogTop: 离桌面上的距离。
　　center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
　　help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
　　resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
　　status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
  scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

  还有几个属性是用在HTA中的，在一般的网页中一般不使用。
  dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
  edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
  unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

在模式对话框关闭后，我们需要将返回的结果写到父窗口中的指定field，就如我们定义的方法最后那个判断部分。显然我们返回的是一个数组，实际上，你可以自己定义模式对话框的返回值，下面是上述action跳转的jsp页面（即对话框中显示部分的js代码）：

Js代码  

1. function confirm_select(){   
2.         if(document.getElementById('selectedNumberId').value != null &&   
3.                 document.getElementById('selectedNumberId').value != '') {   
4.             window.returnValue = new Array(2);   
5.             window.returnValue[0] = document.getElementById('selectedNumberId').value;   
6.             window.returnValue[1] = document.getElementById('selectedCodeMeanId').value;   
7.         }   
8.         window.close();   
9.     }  

function confirm_select(){
		if(document.getElementById('selectedNumberId').value != null &&
				document.getElementById('selectedNumberId').value != '') {
			window.returnValue = new Array(2);
			window.returnValue[0] = document.getElementById('selectedNumberId').value;
			window.returnValue[1] = document.getElementById('selectedCodeMeanId').value;
		}
		window.close();
	}

当用户选择完毕后，点击“确定”按钮，调用上面这个函数，判断用户是否选择了代码，通过

Js代码  

1. window.returnValue = new Array(2);  

window.returnValue = new Array(2);

我们定义了窗口关闭后的返回值，这样我们在父窗口就得到了这个数组，并能把它们写到指定的页面字段用于表单提交。
有意思吗？（语无伦次了，这是我第一次写blog，多多关照哈大家）

然后下面再来个小例子：
testModelDialog.html是父窗口：

Html代码  

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
2. <HTML>  
3.  <HEAD>  
4.   <TITLE> New Document </TITLE>  
5.   <META NAME="Generator" CONTENT="EditPlus">  
6.   <META NAME="Author" CONTENT="">  
7.   <META NAME="Keywords" CONTENT="">  
8.   <META NAME="Description" CONTENT="">  
9.  </HEAD>  
10. <script>  
11.     function popupDialog(fieldId,width,height){   
12.         var ret = window.showModalDialog("aModelDialog.html",'你喜欢的女生是谁呢？',   
13.         'dialogWidth:' + width + 'px;dialogHeight:' + height + 'px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes');   
14.         document.getElementById(fieldId).value = ret;   
15.   }   
16.  </script>  
17.  <BODY>  
18.   点击回答你的问题：<input type="text" name="fieldName" id="fieldId" onclick="popupDialog('fieldId',300,400);"/>  
19.   <input type="button" value="..." onclick="popupDialog('fieldId',400,300);"/>  
20.  </BODY>  
21. </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>
<script>
	function popupDialog(fieldId,width,height){
		var ret = window.showModalDialog("aModelDialog.html",'你喜欢的女生是谁呢？',
		'dialogWidth:' + width + 'px;dialogHeight:' + height + 'px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes');
		document.getElementById(fieldId).value = ret;
  }
 </script>
 <BODY>
  点击回答你的问题：<input type="text" name="fieldName" id="fieldId" οnclick="popupDialog('fieldId',300,400);"/>
  <input type="button" value="..." οnclick="popupDialog('fieldId',400,300);"/>
 </BODY>
</HTML>

aModelDialog.html是弹出窗口：

Html代码  

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
2. <HTML>  
3.  <HEAD>  
4.   <TITLE> 模式对话框</TITLE>  
5.   <META NAME="Generator" CONTENT="EditPlus">  
6.   <META NAME="Author" CONTENT="">  
7.   <META NAME="Keywords" CONTENT="">  
8.   <META NAME="Description" CONTENT="">  
9.  </HEAD>  
10. <SCRIPT LANGUAGE="JavaScript">  
11. <!--   
12.     function confirm_answer(){   
13.         if(document.getElementById('my_answer_id').value == '') {   
14.             alert('你必须回答问题！');   
15.             return;   
16.         }   
17.         window.returnValue = document.getElementById('my_answer_id').value;   
18.         window.close();   
19.     }   
20.        
21. //-->  
22. </SCRIPT>  
23.  <BODY>  
24.   我的答案：<input type="text" id="my_answer_id"/><input type="button" value="提交" onclick="confirm_answer();"/>  
25.  </BODY>  
26.  <SCRIPT LANGUAGE="JavaScript">  
27.  <!--   
28.     if(window.dialogArguments!=null)   
29.         alert(window.dialogArguments);   
30.  //-->  
31.  </SCRIPT>  
32. </HTML>