JavaScript中window.showModalDialog()用法详解


Posted in Javascript onDecember 18, 2014

今天在项目中用到了弹出子窗口,就想到了用JavaScript实现的两种方法,一个是window.open();一个是window.showModalDialog()方法,后者是存在父子关系的一种弹出窗口,只有子窗关闭,父窗口才激活,并且可以传送参数和返回值。正好又温习一遍用法,顺便在此记录过程中遇到的问题。

基本介绍:

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,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。

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个字符,也可以传递对象。

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

Javascript 相关文章推荐
javascript一些实用技巧小结
Mar 18 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
json数据格式常见操作示例
Jun 13 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 #Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 #Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 #Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 #Javascript
使用JS获取当前地理位置方法汇总
Dec 18 #Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 #Javascript
node.js中的fs.chmod方法使用说明
Dec 18 #Javascript
You might like
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
JS控制GIF图片的停止与显示
2019/10/24 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
python 整数越界问题详解
2019/06/27 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
深入了解Python 变量作用域
2020/07/24 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
乡镇消防安全责任书
2014/07/23 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
放弃继承权公证书
2015/01/23 职场文书
外出听课学习心得体会
2016/01/15 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
介绍一下28个JS常用数组方法
2022/05/06 Javascript