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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
ASP.NET中AJAX 调用实例代码
May 03 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
Javascript实现基本运算器
Jul 15 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 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使用session二维数组实例
2014/11/06 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
jQuery 解析xml文件
2009/08/09 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
微信小程序单选框自定义赋值
2020/05/26 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
公司踏青活动方案
2014/08/16 职场文书
2014年车间工作总结
2014/11/21 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
2016年十一促销广告语
2016/01/28 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
Python闭包的定义和使用方法
2022/04/11 Python
Python中的 enumerate和zip详情
2022/05/30 Python