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 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
jQuery 技巧小结
Apr 02 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 Javascript
图片完美缩放
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
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php中使用GD库做验证码
2016/03/31 PHP
php数据访问之查询关键字
2016/05/09 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
Cython 三分钟入门教程
2009/09/17 Python
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
简单了解python的break、continue、pass
2019/07/08 Python
Django logging配置及使用详解
2019/07/23 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
汽车技术服务英文求职信范文
2014/01/02 职场文书
《尊严》教学反思
2014/02/11 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
关于责任的演讲稿
2014/05/20 职场文书
学校节能减排方案
2014/06/13 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js