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代码
Sep 17 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
微信小程序实现星星评分效果
Nov 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
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
PHP 验证登陆类分享
2015/03/13 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
Python with的用法
2014/08/22 Python
python time模块用法实例详解
2014/09/11 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
python实现点对点聊天程序
2018/07/28 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
全神贯注教学反思
2014/02/03 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
新学期决心书
2014/03/11 职场文书
男女朋友协议书
2014/04/23 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS