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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
浅析Ajax语法
Dec 05 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
用Vue编写抽象组件的方法
May 06 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绘图之加载外部图片的方法
2015/01/24 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
使用js 设置url参数
2013/07/08 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python中的django是做什么的
2020/07/31 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
金融专业毕业生推荐信
2013/11/26 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
初中学生操行评语
2014/12/26 职场文书
校友回访母校寄语
2015/02/26 职场文书
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android