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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
javascript dom 操作详解 js加强
Jul 13 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
JavaScript File分段上传
Mar 10 Javascript
Sort()函数的多种用法
Mar 20 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
一个小例子解释如何来阻止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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
python实现简单俄罗斯方块
2020/03/13 Python
关于Python解包知识点总结
2020/05/05 Python
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
2014新年寄语
2014/01/20 职场文书
优秀教师主要事迹
2014/02/01 职场文书
企业读书活动总结
2014/06/30 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
先进基层党组织材料
2014/12/25 职场文书
工作收入证明模板
2015/06/12 职场文书
交通事故责任认定书
2015/08/06 职场文书
学生检讨书范文
2019/06/24 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS