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.Encode手动解码技巧
Jul 14 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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/10/22 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
Python subprocess模块学习总结
2014/03/13 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python实现海螺图片的方法示例
2019/05/12 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
python常量折叠基础知识点讲解
2021/02/28 Python
高中毕业自我鉴定
2013/12/19 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
中标通知书范本
2015/04/17 职场文书
植树节新闻稿
2015/07/17 职场文书
2019同学聚会主持词
2019/05/06 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
在Python 中将类对象序列化为JSON
2022/04/06 Python