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 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 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
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
JS实现简单打字测试
2020/06/24 Javascript
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
python web基础之加载静态文件实例
2018/03/20 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
教师档案管理制度
2014/01/23 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
广告词串烧
2014/03/19 职场文书
党员评议个人总结
2014/10/20 职场文书
优秀党员推荐材料
2014/12/18 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
党支部综合考察意见
2015/06/01 职场文书
预备党员党支部意见
2015/06/02 职场文书
python如何获取网络数据
2021/04/11 Python