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 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
canvas绘制多边形
Feb 24 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
通过js随机函数Math.random实现乱序
May 19 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实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
Python单链表简单实现代码
2016/04/27 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python手写均值滤波
2020/02/19 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
CAD制图人员的自荐信
2014/02/07 职场文书
党组织公开承诺书
2014/03/29 职场文书
员工自我评价范文
2015/03/11 职场文书
MySQL 数据类型详情
2021/11/11 MySQL
Python Matplotlib绘制动画的代码详解
2022/05/30 Python
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android