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 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
javascript 原型继承介绍
Aug 30 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
js实现数字滚动特效
Dec 16 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 读取文件乱码问题
2010/02/20 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
php生成短网址示例
2014/05/05 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
PHP模块化安装教程
2016/06/01 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
有关三国演义的读书笔记
2015/06/25 职场文书
研讨会致辞
2015/07/31 职场文书
治庸问责工作总结
2015/08/11 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL