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 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
vue实现井字棋游戏
Sep 29 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调用C代码的实现方法
2014/03/11 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
jQuery select控制插件
2009/08/17 Javascript
node.js中的require使用详解
2014/12/15 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
详解python-图像处理(映射变换)
2019/03/22 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
博士生入学考试推荐信
2013/11/17 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
小学思想品德教学反思
2016/02/24 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server