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中的私有成员
Sep 18 Javascript
提高网站信任度的技巧
Oct 17 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
JavaScript enum枚举类型定义及使用方法
May 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
2.PHP入门
2006/10/09 PHP
PHP中使用BigMap实例
2015/03/30 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JavaScript 指导方针
2007/04/05 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
python小技巧之批量抓取美女图片
2014/06/06 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
惠普香港官方商店:HP香港
2019/04/30 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
新学期校长寄语
2014/01/18 职场文书
诚信承诺书范文
2014/03/27 职场文书
读书月活动方案
2014/05/22 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
党员心得体会范文2016
2016/01/23 职场文书
详解MySQL的半同步
2021/04/22 MySQL
如何在C++中调用Python
2021/05/21 Python
mysql left join快速转inner join的过程
2021/06/30 MySQL
python中super()函数的理解与基本使用
2021/08/30 Python