window.showModalDialog基础

简介: 本文转载:http://www.cnblogs.com/sunnycoder/archive/2010/05/05/1728047.html 基本知识 l  showModalDialog() (IE 4+ 支持) l  showModelessDialog() (IE 5+ 支持) l  window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。

本文转载:http://www.cnblogs.com/sunnycoder/archive/2010/05/05/1728047.html

基本知识

l  showModalDialog() (IE 4+ 支持)

l  showModelessDialog() (IE 5+ 支持)

l  window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。

l  window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

使用方法

var returnValue = window.showModalDialog(sURL[,vArguments][,sFeatures]);

var returnValue = window.showModelessDialog(sURL[,vArguments][,sFeatures]);

参数说明

参数名称

性质

类型

作用

sURL

必选

字符串

用来指定对话框要显示的网页的URL。

vArguments

可选

任何类型

用来向对话框传递参数。参数类型不限。

对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures

可选

字符串

用来描述对话框的外观等信息

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)中的,一般网页上用不到。

参数传递

通过vArguments来传递参数,类型不限制,对于字符串类型,最大为4096个字符,也可以传递对象,例如:

a.html

var p = { Name: "Sunny D.D", Age: 25 };

window.showModalDialog("b.html", p);

b.html

alert(window.dialogArguments.Name);

当显示b.html页面时,会弹出对话框,内容为“Sunny D.D”。

返回值

通过window.returnValue向打开对话框的窗口返回信息,也可以是对象。例如:

a.html

window.showModalDialog("b.html");

alert(window.returnValue.Name);

b.html

var p = { Name: "Sunny D.D", Age: 25 };

window.returnValue = p;

当关闭b.html页面时,会弹出对话框,内容为“Sunny D.D”。

防止模态窗口打开新窗口

在页面的 <body>标签前加入<base target="_self">:

<head>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

    <title>测试页</title>

    <base target="_self" />

</head>

<body>

</body>

调用父窗口的属性或者方法

参数方式

因为vArguments参数的类型没有限制,所以可以将父窗体对象作为参数的一个属性传递至子窗体:

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>

 

window.parent方式

在子窗体中,可以使用语句window.parent来获取父窗体对象,从而调用父窗体的属性与方法:

parent.htm

<script>

    function show() {//父窗口的方法

        alert("show");

    }

    window.showModalDialog("son.htm");

</script>

 

son.htm

<script>

    window.parent.show(); //调用父窗口的方法

</script>

目录
相关文章
|
4月前
|
存储 安全 开发者
|
前端开发
前端 window 和 window.location
前端 window 和 window.location
前端 window 和 window.location
为什么会有window.window这种设计
为啥要搞这个这个看起来貌似很奇葩的设计。 要解答这个问题,还得请出this,我们经常说浏览器中的全局对象是window, 这句话对了,也还没完全对。 全局对象的真实身份应该是全局作用域的this。 window只是为了便于访问this,弄出来的一个属性。
305 0
为什么会有window.window这种设计
解决popup不随着window一起移动的问题
原文:解决popup不随着window一起移动的问题 当我们设置Popup的StayOpen="True"时,会发现移动窗体或者改变窗体的Size的时候,Popup并不会跟随着一起移动位置。为了解决这个问题,可以给Popup定义一个附加属性,代码如下所示: /// /// Popup帮助类...
1104 0
|
Web App开发 JavaScript 前端开发