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.validate使用攻略 第二部
Jul 01 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
vue实现下拉菜单树
Oct 22 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
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
javascript 自定义事件初探
2009/08/21 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
python opencv之SURF算法示例
2018/02/24 Python
Python3几个常见问题的处理方法
2019/02/26 Python
django-csrf使用和禁用方式
2020/03/13 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
python 模拟登陆github的示例
2020/12/04 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
监理资料员岗位职责
2014/01/03 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
书法比赛获奖感言
2014/02/10 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
党员评议个人总结
2014/10/20 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
小学生教师节广播稿
2015/08/19 职场文书
Java存储没有重复元素的数组
2022/04/29 Java/Android