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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
js星星评分效果
Jul 24 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 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
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
php获取错误信息的方法
2015/07/17 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
详解vue路由
2020/08/05 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
django解决跨域请求的问题
2018/11/11 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
详解Python高阶函数
2020/08/15 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
导游词之太原天龙山
2020/01/02 职场文书