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类库D
Oct 24 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
layui递归实现动态左侧菜单
Jul 26 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缓存函数的使用说明
2013/05/10 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP实现的简单缓存类
2015/07/29 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
JavaScript实现禁止后退的方法
2006/12/27 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
原生js实现随机点名
2020/07/05 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
网游商务专员求职信
2013/10/15 职场文书
资料员的岗位职责
2013/11/20 职场文书
中药专业自荐信范文
2014/03/18 职场文书
公司聚餐通知
2015/04/22 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
工作会议简报
2015/07/20 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书