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 相关文章推荐
Javascript计算时间差的函数分享
Jul 04 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
JS如何生成随机验证码
Mar 02 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
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
js模拟C#中List的简单实例
2014/03/06 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python中的sort方法使用详解
2014/07/25 Python
python中list循环语句用法实例
2014/11/10 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python实现备份目录的方法
2015/08/03 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
python 正确保留多位小数的实例
2018/07/16 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
Python学习笔记之装饰器
2020/08/06 Python
python map比for循环快在哪
2020/09/21 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
无工作经验者个人求职信范文
2013/12/22 职场文书
金融专业大学生自我评价
2014/01/09 职场文书
优秀经理事迹材料
2014/02/01 职场文书
超市促销活动总结
2014/07/01 职场文书
见习报告格式范文
2014/11/08 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python