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 相关文章推荐
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
js日期联动示例
May 02 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
vue中动态select的使用方法示例
Oct 28 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
JS模拟实现京东快递单号查询
Nov 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正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
django使用graphql的实例
2020/09/02 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
上课玩手机检讨书
2014/02/08 职场文书
优秀教师工作感言
2014/02/16 职场文书
毕业论文致谢信
2015/05/14 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL