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 相关文章推荐
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
JavaScript中的比较操作符>、=、
Dec 31 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
详解jQuery中的easyui
Sep 02 jQuery
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 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中curl和file_get_content的区别
2014/05/10 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
高中班主任评语大全
2014/04/25 职场文书
根叔历年演讲稿
2014/05/20 职场文书
股东出资证明书范例
2014/10/04 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
体育委员竞选稿
2015/11/21 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS