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 全角转换实现代码
Jul 17 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
express启用https使用小记
May 21 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
js对象数组和对象的使用实例详解
Aug 27 Javascript
Vue实现浏览器打印功能的代码
Apr 17 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/01/26 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
浅谈react 同构之样式直出
2017/11/07 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python+微信接口实现运维报警
2016/08/27 Python
python访问抓取网页常用命令总结
2017/04/11 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
python:动态路由的Flask程序代码
2019/11/22 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
保险公司早会主持词
2014/03/22 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
物流专业求职信
2014/06/30 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
总结Python常用的魔法方法
2021/05/25 Python