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 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
node.js入门教程
Jun 01 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
如何理解Vue简单状态管理之store模式
May 15 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
使用Python对SQLite数据库操作
2017/04/06 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Python函数参数分类原理详解
2020/05/28 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
Django REST 异常处理详解
2020/07/15 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
厨房工作人员岗位职责
2013/11/15 职场文书
排查整治工作方案
2014/06/09 职场文书
武夷山导游词
2015/02/03 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
mysql部分操作
2021/04/05 MySQL