js 模式窗口(模式对话框和非模式对话框)的使用介绍


Posted in Javascript onJuly 17, 2014

Javascript里面分模式对话框和非模式对话框,其实两者区别就是在对话框被关闭之前用户能否在同一页面的其他地方进行工作。比如“打开文件”对话框便是典型的模式对话框,在你对这个对话框做出动作才能对打开该对话框的程序进行其他操作,而非模式对话框则不必。

模式对话框:showModalDialog
非模式对话框:showModelessDialog

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

返回值:vReturnValue,由对话框返回当然就是返回值了;
sURL:必选,为你要打开的页面;

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个字符。也可以传递对象,例如:
-------------------------------
parent.htm

<script> 
var obj = new Object(); 
obj.name="51js"; 
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); 
</script>

modal.htm

<script> 
var obj = window.dialogArguments 
alert("您传递的参数为:" + obj.name) 
</script>

 -------------------------------
2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:
------------------------------
parent.htm

<script> 
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); 
alert(str); 
</script>

modal.htm

<script> 
window.returnValue="http://www.51js.com"; 
</script>

用window.showModalDialog 或者window.showModelessDialog打开一个模式窗口后,和父窗口的一些交互问题。
要进行交互操作的前提,在调用showModalDialog或者showModelessDialog方法的时候,第二个参数传window,如:
window.showModelessDialog('filename.htm',window,'dialogWidth=200px;dialogHeight=250px;')
接下来,就是取得父窗口的一些数据和方法,这是经常会用的,父窗口取子窗口的参数一般通过returnValue就可以搞定了

//取得父窗口的JS变量 var 
window.dialogArguments.var; 
//获得父窗口的对象和属性 
window.dialogArguments.form1.name.value ; 
//调用父窗口的方法 fun
window.dialogArguments.fun() ;
Javascript 相关文章推荐
picChange 图片切换特效的函数代码
May 06 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 #Javascript
iframe调用父页面函数示例详解
Jul 17 #Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 #Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 #Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 #Javascript
Express.JS使用详解
Jul 17 #Javascript
JavaScript DOM节点添加示例
Jul 16 #Javascript
You might like
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
javascript 写类方式之九
2009/07/05 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Python入门篇之条件、循环
2014/10/17 Python
python端口扫描系统实现方法
2014/11/19 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
浅述python2与python3的简单区别
2018/09/19 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
详解Python 循环嵌套
2020/07/09 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
Delphi笔试题
2016/11/14 面试题
基层工作经验证明样本
2014/11/16 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书