项目中有时候需要通过在浏览器中弹出模式对话框，让用户在对话框中选择，确定后能在父窗口指定的字段填写上用户在对话框中选择的值。可以先使用js定义如下方法：
/**
* 弹出一个对话框用于选择代码
* @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]}"
onclick="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];
}
}
注意到这里使用的方法是：
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代码）：
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();
}
当用户选择完毕后，点击“确定”按钮，调用上面这个函数，判断用户是否选择了代码，通过
window.returnValue = new Array(2);
我们定义了窗口关闭后的返回值，这样我们在父窗口就得到了这个数组，并能把它们写到指定的页面字段用于表单提交。
有意思吗？（语无伦次了，这是我第一次写blog，多多关照哈大家）
然后下面再来个小例子：
testModelDialog.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" onclick="popupDialog('fieldId',300,400);"/>
<input type="button" value="..." onclick="popupDialog('fieldId',400,300);"/>
</BODY>
</HTML>
aModelDialog.html是弹出窗口：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 模式对话框</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function confirm_answer(){
if(document.getElementById('my_answer_id').value == '') {
alert('你必须回答问题！');
return;
}
window.returnValue = document.getElementById('my_answer_id').value;
window.close();
}
//-->
</SCRIPT>
<BODY>
我的答案：<input type="text" id="my_answer_id"/><input type="button" value="提交" onclick="confirm_answer();"/>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
if(window.dialogArguments!=null)
alert(window.dialogArguments);
//-->
</SCRIPT>
</HTML>
