Window.ShowModalDialog使用手册

高军威

浏览: 183113 次
性别:
来自: 北京

最近访客更多访客>>

caorucan

coreycool

zswzhj

fuanyu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

基本介绍：
         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，因为他很强大！各种效果！！

分享到：

oracle10g导入导出 (用户模式)

2012-10-09 08:40
浏览 1174
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论