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 类与静态类的实现
Apr 01 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
Vue如何实现验证码输入交互
Dec 07 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
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
js 中 document.createEvent的用法
2010/08/29 Javascript
JS交换变量的方法
2015/01/21 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
Python中List.index()方法的使用教程
2015/05/20 Python
详解Python中的Cookie模块使用
2015/07/06 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python模块搜索路径代码详解
2018/01/29 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
什么是类的返射机制
2016/02/06 面试题
医院辞职信范文
2014/01/17 职场文书
我的理想演讲稿
2014/04/30 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android