手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS中showModalDialog 的使用解析
JS中showModalDialog 的使用解析
摘要:基本介绍:window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。(就是打开后不能操作父窗口,只能等模...

基本介绍:

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="选择输入" />

</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>

【JS中showModalDialog 的使用解析】相关文章:

JavaSacript中charCodeAt()方法的使用详解

JavaScipt中Function()函数的使用教程

JavaScript中getUTCMinutes()方法的使用详解

JavaScript中String.match()方法的使用详解

JavaScript中的Math.LOG2E属性使用详解

JavaScript中的small()方法使用详解

AngularJS中$interval的用法详解

简介JavaScript中toTimeString()方法的使用

JavaScript中setMonth()方法的使用详解

JavaScript中valueOf()方法的使用介绍

精品推荐
分类导航