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 相关文章推荐
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
浅析Jquery操作select
Dec 13 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
flexible.js实现移动端rem适配方案
Apr 07 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
Python中删除文件的程序代码
2011/03/13 Python
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
python操作mysql数据库
2017/03/05 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python实现AES加密和解密
2019/03/27 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Python代码太长换行的实现
2019/07/05 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
python基于win32api实现键盘输入
2020/12/09 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
EJB3推出JPA的原因
2013/10/16 面试题
财务管理专业毕业生求职信范文
2013/09/21 职场文书
创意活动策划书
2014/01/15 职场文书
绿色学校实施方案
2014/03/31 职场文书
体育口号大全
2014/06/18 职场文书
岳麓书院导游词
2015/02/03 职场文书
python xlwt模块的使用解析
2021/04/13 Python