JavaScript showModalDialog 与 showModelessDialog 详解及参数传递

showModalDialog 与 showModelessDialog 基本介绍

基本介绍

window.showModalDialog() 方法用于创建一个模态对话框，用于显示指定的HTML内容。该对话框打开后，父窗口将被锁定，用户无法操作父窗口，必须关闭模态对话框后才能继续与父窗口交互。

window.showModelessDialog() 方法用于创建一个非模态对话框，同样用于显示HTML内容。与非模态对话框不同，打开该窗口后，用户仍可以操作父窗口中的其他元素，无需等待子窗口关闭。

方法调用语法与参数说明

使用方法

调用语法为：vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])。

非模态对话框的调用语法为：vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])。

参数说明

sURL：必选参数，类型为字符串，指定对话框中要显示的文档的URL地址。

vArguments：可选参数，类型为变体（Variant），用于向对话框传递参数。参数类型不限，可以是字符串、数组或对象等。在对话框内部，通过 window.dialogArguments 属性来获取传递进来的参数。

sFeatures：可选参数，类型为字符串，用于描述对话框的外观属性。可以使用以下一个或多个属性，各属性之间用分号“;”分隔。

-------------------------------

通过 vArguments 传递参数示例

参数传递示例： 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>
最终结果

通过 window.returnValue 返回结果示例

2. 可以通过 window.returnValue 向打开对话框的窗口返回信息。返回值可以是布尔值、整型值，也可以是 JavaScript 数组或对象。

父窗口 parent.html

<script type="text/javascript">
/**
*通过controller转向在模拟窗口加载JSP页面
**/
function selectUserList(param) {
var sURL = "${pageContext.request.contextPath}/SelectUserController/selUser.do?checkTip="+param.checkType+"&regField="+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>