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 相关文章推荐
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 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
symfony表单与页面实现技巧
2015/01/26 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
vue的for循环使用方法
2019/02/12 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python中的默认参数实例分析
2018/01/29 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
2013年入党人员的自我鉴定
2013/10/25 职场文书
高中英语教学反思
2014/02/04 职场文书
霸王洗发水广告词
2014/03/14 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
营销计划书
2015/01/17 职场文书
捐书活动倡议书
2015/04/27 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技