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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
js闭包的用途详解
Nov 09 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
PassWord输入框代码分享
Jun 07 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
微信小程序实现图片上传
May 23 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 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
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
解密Python中的描述符(descriptor)
2015/06/03 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
大专生自我评价
2014/01/28 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
企业授权委托书范本
2014/04/02 职场文书
我的画教学反思
2014/04/28 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
环保守法证明
2015/06/24 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL