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 贪吃蛇实现代码
Nov 22 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
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 opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
php文件包含的几种方式总结
2019/09/19 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
Array对象方法参考
2006/10/03 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
NumPy 数组使用大全
2019/04/25 Python
python定时任务 sched模块用法实例
2019/11/04 Python
python上selenium的弹框操作实现
2020/07/13 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
英语自荐信范文
2013/12/11 职场文书
集体备课反思
2014/02/12 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
python实现简易名片管理系统
2021/04/11 Python
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python