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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
javascript实现点击小图显示大图
Nov 29 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 Smarty模板生成html文档的方法
2010/04/12 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
php强制下载文件函数
2016/08/24 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
Python中的闭包实例详解
2014/08/29 Python
python中元类用法实例
2014/10/10 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
计算机专业职业生涯规划范文
2014/01/19 职场文书
自我鉴定注意事项
2014/01/19 职场文书
大学生村官考核材料
2014/05/23 职场文书
《给予树》教学反思
2016/03/03 职场文书
车辆挂靠协议书
2016/03/23 职场文书
nginx优化的六点方法
2021/03/31 Servers
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技