JS中showModalDialog 的使用解析
基本介绍：
window.showModalDialog() 方法用来创建一个显示HTML内容的模态对话框。(就是打开后不能操作父窗口,只能等模式 窗口关闭时才能操作)
window.showModelessDialog() 方法用来创建一个显示HTML内容的非模态对话框。(就是打开后仍然可以进行其他的操作)
使用方法：
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明：
sURL -- 必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments -- 可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过 window.dialogArguments来取得传递进来的参数。
sFeatures -- 可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
-------------------------------
参数传递：
1. 要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象.
parent.html
<body>
用户名：
<input id="usernameID" type="text" readonly/>
<input id="buttonID" type="button" value="选择输入" />
<script type="text/javascript">
var sURL = "showModalDialog2.html";
//将父窗口对象传给子窗口
var vArguments = window;
var sFeatures = "dialogHeight:200px;dialogWidth:450px";
document.getElementById("buttonID").onclick = function(){
//单击"选择输入"按钮，弹出对话框以供选择输入
window.showModalDialog(sURL,vArguments,sFeatures);
}
</script>
</body>
children.html
<body>
<script type="text/javascript">
//单击"选择输入"按钮后，会将对应的值显示在父窗口文本框中
//接收父窗口传过来的对象
var fatherWindow = window.dialogArguments;
function selectInput(inputElement){
//取得用户名
var username = inputElement.parentNode.nextSibling.firstChild.nodeValue;
//将用户名设置到父窗口相关的位置
fatherWindow.document.getElementById("usernameID").value = username;
}
</script>
<table border="1" align="center">
<tr>
<th>
操作
</th>
<th>
用户名
</th>
</tr>
<tr>
<td>
<input type="button" value="选择输入" onclick="selectInput(this)" />
</td>
<td>
张三
</td>
</tr>
</table>
</body>
最终结果：
2.可以通过window.returnValue向打开对话框的窗口返回信息,可以是布尔值,整型值等以外还可以是个js数组,当然也可以是对象.
parent.html
<script type="text/javascript">
/**
*通过controller转向在模拟窗口加载JSP页面
**/
function selectUserList(param) {
var sURL = "${pageContext.request.contextPath}/SelectUserController/selUser.do?checkTip="+param.checkType+"®Field="+param.regField";
var vArguments = window;
var sFeatures = "scrollbars=no;resizable=no;help=no;status=no;center:yes;dialogHeight=580px;dialogWidth=776px"";
return window.showModalDialog(sURL,vArguments,sFeatures);
}
/**
*通过JSON传值,并返回JSON数组
**/
function getUser(){
var retValue = selectUserList({'checkType':'','regField':'more'});
</script>
上一篇：javascript创建createXmlHttpRequest对象示例代码
栏 目：JavaScript代码
本文地址：http://www.codeinn.net/misctech/5860.html
