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编程起步(第五课)
Jan 10 Javascript
jQuery Ajax 全解析
Feb 08 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
用JS实现选项卡
Mar 23 Javascript
js回到页面指定位置的三种方式
Dec 17 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
React Router基础使用
2017/01/17 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
进一步探究Python中的正则表达式
2015/04/28 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
团队精神演讲稿
2013/12/31 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
公司管理制度范本
2015/08/03 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL