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 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
详解webpack多页面配置记录
2018/01/22 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
js html实现计算器功能
2018/11/13 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
初步探究Python程序的执行原理
2015/04/11 Python
Python中property属性实例解析
2018/02/10 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
普通员工辞职信
2014/01/17 职场文书
推荐信格式范文
2014/05/09 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
英语专业求职信
2014/07/08 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
交通事故调解协议书
2015/05/20 职场文书
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers