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 相关文章推荐
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
Angular4 ElementRef的应用
Feb 26 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 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
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
js下将字符串当函数执行的方法
2011/07/13 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
js轮播图代码分享
2016/07/14 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python编程入门的一些基本知识
2015/05/13 Python
Python获取邮件地址的方法
2015/07/10 Python
解读python如何实现决策树算法
2018/10/11 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
Python运算符+与+=的方法实例
2021/02/18 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
大专学生推荐信范文
2013/11/19 职场文书
前台文员岗位职责
2013/12/28 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
三年级评语大全
2014/04/23 职场文书
需求分析说明书
2014/05/09 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript