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 汉字字节判断
Aug 01 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
一个小例子解释如何来阻止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
一个SQL管理员的web接口
2006/10/09 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
python获取文件扩展名的方法
2015/07/06 Python
简单理解Python中的装饰器
2015/07/31 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
公休请假条
2014/04/11 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫