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获得url查询参数的方法
Jul 02 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
用原生js做单页应用
Jan 17 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 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实用函数分享之去除多余的0
2015/02/06 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
python版本的读写锁操作方法
2016/04/25 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python虚拟环境迁移方法
2019/01/03 Python
python批量图片处理简单示例
2019/08/06 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
军训 自我鉴定
2014/02/03 职场文书
yy生日主持词
2014/03/20 职场文书
教师求职自荐书
2014/06/14 职场文书
运动会开幕词
2015/01/28 职场文书
导游词开场白
2015/01/31 职场文书
户外亲子活动总结
2015/05/08 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
大学军训心得体会800字
2016/01/11 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
实例详解Python的进程,线程和协程
2022/03/13 Python