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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
vue使用watch监听属性变化
Apr 30 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的array_multisort()使用方法介绍
2012/05/16 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
javascript String 对象
2008/04/25 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
关于Python中异常(Exception)的汇总
2017/01/18 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
python——全排列数的生成方式
2020/02/26 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
新郎父亲婚宴答谢词
2014/01/11 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
企业法人代表证明书
2014/09/27 职场文书
工作能力自我评价2015
2015/03/05 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python