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 相关文章推荐
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
Jquery 效果使用详解
Nov 23 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php基础学习之变量的使用
2011/06/09 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python实现五子棋人机对战游戏
2020/03/25 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
什么是TCP/IP
2014/07/27 面试题
行政人员工作职责
2013/12/05 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
现实表现证明材料
2015/06/19 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis