showModelessDialog()使用详解


Posted in Javascript onSeptember 07, 2006

Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如: 

    showModalDialog() (IE 4+ 支持)
   showModelessDialog() (IE 5+ 支持)

    window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。

    window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。 

    当我们用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时, 打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。

使用方法如下:
    vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
    vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

参数说明:
    sURL
   必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
    vArguments
   可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
    sFeatures
   可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
    dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
   dialogWidth: 对话框宽度。
   dialogLeft: 距离桌面左的距离。
   dialogTop: 离桌面上的距离。
   center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
   help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
   resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
   status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
    scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。
    dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
    edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
    unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

传入参数:
    要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

test1.htm

<script> 
  var mxh1 = new Array("mxh","net_lover","孟子E章") 
  var mxh2 = window.open("about:blank","window_mxh") 
  // 向对话框传递数组 
  window.showModalDialog("test2.htm",mxh1) 
  // 向对话框传递window对象 
  window.showModalDialog("test3.htm",mxh2) 
</script>test2.htm 
<script> 
  var a = window.dialogArguments 
  alert("您传递的参数为:" + a) 
</script> 

test3.htm
<script> 
  var a = window.dialogArguments 
  alert("您传递的参数为window对象,名称:" + a.name) 
 </script>

 可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:

test4.htm

<script> 
  var a = window.showModalDialog("test5.htm") 
  for(i=0;i<a.length;i++) alert(a[i]) 
</script>test5.htm 
 <script> 
 function sendTo() 
 { 
  var a=new Array("a","b") 
  window.returnValue = a 
  window.close() 
 } 
 </script> 
 <body> 
 <form> 
  <input value="返回" type=button onclick="sendTo()"> 
 </form>

常见问题:
1,如何在模态对话框中进行提交而不新开窗口?
   如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作。例如:

 test6.htm

<script> 
  window.showModalDialog("test7.htm") 
 </script>

 test7.htm
if(window.location.search) alert(window.location.search) 
 <frameset rows="0,*"> 
  <frame src="about:blank"> 
  <frame src="test8.htm"> 
 </frameset>

 test8.htm
<form target="_self" method="get"> 
 <input name=txt value="test"> 
 <input type=submit> 
 </form> 
 <script> 
 if(window.location.search) alert(window.location.search) 
 </script> 
 
 

Javascript 相关文章推荐
js计算精度问题小结
Apr 22 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
javascript实现Table排序的方法
May 15 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
微信小程序实现底部弹出框
Nov 18 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
图片完美缩放
Sep 07 #Javascript
prototype class详解
Sep 07 #Javascript
IE中jscript/javascript的条件编译
Sep 07 #Javascript
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 #Javascript
彪哥1.1(智能表格)提供下载
Sep 07 #Javascript
日期函数扩展类Ver0.1.1
Sep 07 #Javascript
js脚本学习 比较实用的基础
Sep 07 #Javascript
You might like
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
Smarty模板语法详解
2019/07/20 PHP
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python MySQLdb Linux下安装笔记
2015/05/09 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
python http基本验证方法
2018/12/26 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
2014年高三毕业生自我评价
2014/01/11 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
师恩难忘教学反思
2014/04/27 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
交通处罚决定书
2015/06/24 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书