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

最新推荐文章于 2022-06-11 15:22:43 发布

lichen782

最新推荐文章于 2022-06-11 15:22:43 发布

阅读量201

点赞数

分类专栏： web 文章标签：浏览器 HTML JSP Security Blog

本文链接：https://blog.csdn.net/lichen782/article/details/83432908

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目中有时候需要通过在浏览器中弹出模式对话框，让用户在对话框中选择，确定后能在父窗口指定的字段填写上用户在对话框中选择的值。可以先使用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>