showModelessDialog()使用详解


Posted in Javascript onSeptember 21, 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)
</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>

2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗?
 答案是不能。但在frame里是可以的。

Javascript 相关文章推荐
javascript工具库代码
Mar 29 Javascript
HTML上传控件取消选择
Mar 06 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
vue实现分页的三种效果
Jun 23 Javascript
Javascript里使用Dom操作Xml
Sep 20 #Javascript
Js+XML 操作
Sep 20 #Javascript
发现的以前不知道的函数
Sep 19 #Javascript
多个iframe自动调整大小的问题
Sep 18 #Javascript
跨浏览器的设置innerHTML方法
Sep 18 #Javascript
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 #Javascript
JavaScript静态的动态
Sep 18 #Javascript
You might like
Php+SqlServer实现分页显示
2006/10/09 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python实现目录树生成示例
2014/03/28 Python
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python执行外部程序的常用方法小结
2015/03/21 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
简单了解Django项目应用创建过程
2020/07/06 Python
python 基于opencv实现图像增强
2020/12/23 Python
PHP如何设置和取得Cookie值
2015/06/30 面试题
销售内勤岗位职责
2014/04/15 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
vue实现列表垂直无缝滚动
2022/04/08 Vue.js