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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 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
初识Laravel
2014/10/30 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
javascript Window及document对象详细整理
2011/01/12 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
python写xml文件的操作实例
2014/10/05 Python
详解Python的单元测试
2015/04/28 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
饮料业务员岗位职责
2013/12/15 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
高中同学会致辞
2015/08/01 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL