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 29 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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 设计模式之观察者模式介绍
2012/02/22 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
python系列 文件操作的代码
2019/10/06 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
高中军训感想800字
2014/02/23 职场文书
医师定期考核实施方案
2014/05/07 职场文书
暑期培训班策划方案
2014/08/26 职场文书
简易版租房协议书范本
2014/10/13 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
交通事故和解协议书
2015/01/27 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
医学会议开幕词
2016/03/03 职场文书
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers