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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
js实现无缝轮播图特效
May 09 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
ThinkPHP php 框架学习笔记
2009/10/30 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python随机读取文件实现实例
2017/05/25 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python3.x上post发送json数据
2018/03/04 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
Python Lambda函数使用总结详解
2019/12/11 Python
PyQt5实现登录页面
2020/05/30 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
抗洪抢险事迹材料
2014/05/06 职场文书
珍爱生命主题班会
2015/08/13 职场文书
初中语文教学随笔
2015/08/15 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers