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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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 递归效率分析
2009/11/24 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
php分页查询的简单实现代码
2017/03/14 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
横向对比分析Python解析XML的四种方式
2016/03/30 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
Python实现图像的垂直投影示例
2020/01/17 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
T3官网:头发造型工具
2019/12/26 全球购物
傲盾软件面试题
2015/08/17 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
大学毕业感言
2014/01/10 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
党委班子剖析材料
2014/08/21 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
唐山大地震的观后感
2015/06/05 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
感恩教师节主题班会
2015/08/12 职场文书
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL