showModelessDialog()使用详解


Posted in Javascript onSeptember 07, 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[i]) 
</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> 
 
 

Javascript 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
简述JS控制台的使用
Jul 15 Javascript
图片完美缩放
Sep 07 #Javascript
prototype class详解
Sep 07 #Javascript
IE中jscript/javascript的条件编译
Sep 07 #Javascript
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 #Javascript
彪哥1.1(智能表格)提供下载
Sep 07 #Javascript
日期函数扩展类Ver0.1.1
Sep 07 #Javascript
js脚本学习 比较实用的基础
Sep 07 #Javascript
You might like
全文搜索和替换
2006/10/09 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHP制作万年历
2015/01/07 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
php post换行的方法
2020/02/03 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
微信小程序实现轮播图效果
2017/09/07 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
焊接专业毕业生求职信
2013/10/01 职场文书
建筑专业毕业生推荐信
2013/11/21 职场文书
车队司机自我鉴定
2014/03/02 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
和谐拯救危机观后感
2015/06/15 职场文书