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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
JavaScript 无符号右移运算符
Apr 17 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
php遍历目录viewDir函数
2009/12/15 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
php如何获取Http请求
2020/04/30 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
async/await地狱该如何避免详解
2018/05/10 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python在线运行代码助手
2016/07/15 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
简单说下OSPF的操作过程
2014/08/13 面试题
Java语言的优势
2015/01/10 面试题
网站开发实习生的自我评价
2013/12/11 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
八达岭长城导游词
2015/01/30 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
Go web入门Go pongo2模板引擎
2022/05/20 Golang