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多线程的实现方法
May 08 Javascript
JavaScript 事件记录使用说明
Oct 20 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 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/09/30 PHP
php通用防注入程序 推荐
2011/02/26 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
vuex入门最详细整理
2020/03/04 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
浅析JavaScript 函数柯里化
2020/09/08 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
python将txt文件读取为字典的示例
2018/12/22 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
对python 调用类属性的方法详解
2019/07/02 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
三好学生自我鉴定
2013/12/17 职场文书
高中课程设置方案
2014/05/28 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2014年药店工作总结
2014/11/20 职场文书
PHP正则表达式之RCEService回溯
2022/04/11 PHP