Window.ShowModalDialog使用手册

最新推荐文章于 2021-11-03 22:08:30 发布

iteye_20151

最新推荐文章于 2021-11-03 22:08:30 发布

阅读量68

点赞数

分类专栏： javaScript 文章标签： js ViewUI

本文链接：https://blog.csdn.net/iteye_20151/article/details/82433871

版权

javaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

基本介绍：
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
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. dialogHeight: 对话框高度，不小于100px
2. dialogWidth: 对话框宽度。
3. dialogLeft: 离屏幕左的距离。
4. dialogTop: 离屏幕上的距离。
5. center: { yes | no | 1 | 0 } ：是否居中，默认yes，但仍可以指定高度和宽度。
6. help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
7. resizable: {yes | no | 1 | 0 } [IE5+]：是否可被改变大小。默认no。
8. status: {yes | no | 1 | 0 } [IE5+]：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9. scroll: { yes | no | 1 | 0 | on | off }：是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的，在一般的网页中一般不使用。
10. dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
11. edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
12. unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。
参数传递：
1. 要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：
-------------------------------
parent.htm
<script>
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
modal.htm
<script>
var obj = window.dialogArguments
alert("您传递的参数为：" + obj.name)
</script>
-------------------------------
2. 可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：
------------------------------
parent.htm
<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="http://homepage.yesky.com";
</script>

1、基本知识

showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

2、使用方法 vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures]);
vReturnValue=window.showModelessDialog(sURL[,vArguments][,sFeatures]);

3、参数说明参数名称性质类型作用
sURL 必选字符串用来指定对话框要显示的网页的URL。
vArguments 可选变体用来向对话框传递参数。参数类型不限。
对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures 可选字符串用来描述对话框的外观等信息

4、sFeatures参数说明参数名称参数属性说明
dialogHeight npx 对话框高度，不小于100px
dialogWidth npx 对话框宽度
dialogLeft npx 离主窗口左的距离
dialogTop npx 离主窗口上的距离
center {yes | no | 1 | 0 } 窗口是否居中，默认yes
help {yes | no | 1 | 0 } 是否显示帮助按钮，默认yes
resizable {yes | no | 1 | 0 } 是否可改变大小，默认no
status {yes | no | 1 | 0 } 是否显示状态栏，默认为yes[ Modeless]或no[Modal]
dialogHide { yes | no | 1 | 0 | on | off } 在打印或者打印预览时对话框是否隐藏，默认为no
scroll { yes | no | 1 | 0 | on | off } 指明对话框是否显示滚动条，默认为yes
edge { sunken | raised } 指明对话框的边框样式，默认为raised
unadorned { yes | no | 1 | 0 | on | off } 默认为no
注意：dialogHide，edge，unadorned这三个属性是用在HTA（HTML Aplication）中的，一般网页上用不到。

5、参数传递通过vArguments来传递参数，类型不限制，对于字符串类型，最大为4096个字符，也可以传递对象，例如： parent.htm
<script>
window.showModalDialog("sun.htm","传递进去的参数","help:no;scroll:no");
</script>
sun.htm
<script>
alert("传来的参数：" + window.dialogArguments);
</script>

6、返回值通过window.returnValue向打开对话框的窗口返回信息，也可以是对象。例如： parent.htm
<script>
result=window.showModalDialog("son.htm","","help:no;scroll:no");
alert(result);
</script>
son.htm
<script>
window.returnValue="这里存放返回的结果";
</script>

7、防止在模态窗口中提交后新开一窗口
在页面的 <body>前加入<base target="_self">

8、调用父窗口的方法同时传递参数 parent.htm
<script>
function show(){//父窗口的方法
alert("show");
}
var arg=new Object();//传递进去的参数
arg.win=window;//把当前窗口的引用当参数传进去
arg.str="argument";//要传进去的其他参数
window.showModalDialog("son.htm",arg,'help:no');
</script>
son.htm
<script>
var arg=window.dialogArguments;
alert(arg.str);
arg.win.show();//调用父窗口的方法
</script>

例子：

<html>
<head>
<title>showModalDialog</title>
<script language="JavaScript">
//aInfo作为数组对象，将被showModalDialog传递到子页面（或叫模式窗体，指当显示页面未关闭前，不能对父页面操作）
//也可用var oMyobject=new Object();
//oMyobject.firstProperty = value; oMyobject.lastProperty = value;的方式定义一个对象（firstProperty,lastProperty是自己按需定义的对象属性，可是任意取名并赋值）
var aInfo  = new Array(3);
aInfo[0] = "aaaaaaaaaaa";
aInfo[1] = "bbbbbbbbbbb";
aInfo[2] = "ccccccccccc";
var url = "dialog.html";
var sFeatures = "width=500px;height=500px;edge=sunken";


function gg(){
 //弹出一个showModalDialog,并以returnValue来获取返回值
 var returnValue = window.showModalDialog(url,aInfo,sFeatures);
 if(returnValue!=null){
  alert(returnValue);
 }  
}
</script>
</head>

<body>
<h3><input type="button" onClick="gg();" value="打开Dialog窗口"></h3>
<div ></div>
</body>
</html>

<html>
<head>
<title>Dialog</title>
<script language="JavaScript">
<!--
//获取父窗口传来的对象（本例中就是父页面中的“oInfo”数组对象，也可用“window”对象，以便对父页面进行操作。总之，只要是object类型就成。）
var args = window.dialogArguments;//获取父页面传递过来的值；
if(args!=null){
 //document.write(args);
 for(var i=0;i<args.length;i++){
  document.writeln(args[i]+" "+(i+1));
 }
}else{
 alert("对不起，参数为空");
}

function hh(){
	var names = document.getElementById("names").value;
	window.returnValue = names;
	this.window.close();
}
//向父窗口返回的值
//-->
</script>
</head>

<body>
	<input type="text" id="names" name="names"/>
	<input type="button" onClick="hh();" value="测试"/>
</body>
</html>

但还是推荐大家用jquery，因为他很强大！各种效果！！

iteye_20151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Window.ShowModalDialog使用手册

基本介绍： showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog() 方法用来创建一个显...
复制链接

扫一扫

专栏目录