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 相关文章推荐
js工具方法弹出蒙版
May 08 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
js实现图片实时时钟
Jan 15 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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
Php部分常见问题总结
2006/10/09 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
js charAt的使用示例
2014/02/18 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
js实现自定义滚动条的示例
2020/10/27 Javascript
解析Python编程中的包结构
2015/10/25 Python
独特的python循环语句
2016/11/20 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
python实现简单日期工具类
2019/04/24 Python
详解python运行三种方式
2019/05/13 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
2014年生产管理工作总结
2014/12/23 职场文书
受资助学生感谢信
2015/01/21 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
小学语文教学随笔
2015/08/14 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
python如何读取和存储dict()与.json格式文件
2022/06/25 Python