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添加输出窗口的代码
Feb 07 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
vue写一个组件
Apr 09 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
PHP中的正规表达式(一)
2006/10/09 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
javascript自执行函数
2017/02/10 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
Python中生成器和yield语句的用法详解
2015/04/17 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
python自动zip压缩目录的方法
2015/06/28 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
Python callable()函数用法实例分析
2018/03/17 Python
python调用API实现智能回复机器人
2018/04/10 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Django重设Admin密码过程解析
2020/02/10 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
婚假请假条怎么写
2014/04/10 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
2014年政工师工作总结
2014/12/18 职场文书
土建施工员岗位职责
2015/04/11 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
MySQL 服务和数据库管理
2021/11/11 MySQL
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript