showModalDialog模态对话框的使用详解以及浏览器兼容
1.ModalDialog是什么？
showModalDialog是jswindow对象的一个方法，和window.open一样都是打开一个新的页面。
区别是：showModalDialog打开子窗口后，父窗口就不能获取焦点了（也就是无法操作了）。
可以在子窗口中通过设置window.returnValue的值，让父窗口可以获取这个returnvalue.
2.一个例子
1)主窗口main.html,
2)在主窗口中通过showModalDialog的方式打开子窗口sub.html
3)在子窗口中设置returnValue返回给主窗口使用
main.html
<HTML>
<HEAD>
<METANAME="GENERATOR"Content="oscar999">
</HEAD>
<script>
functionshowmodal()
{
varret=window.showModalDialog("sub.html?temp="+Math.random());
alert("subreturnvalueis"+ret);
}
</script>
<BODY>
<INPUTid=button1type=buttonvalue="opensub"name=button1οnclick="showmodal();">
</BODY>
</HTML>
sub.html
<HTML>
<HEAD>
<METANAME="GENERATOR"Content="oscar999">
</HEAD>
<script>
functionreturnMain()
{
window.returnValue="returnfromsub";
window.close();
}
</script>
<BODY>
<INPUTid=button1type=buttonvalue="returnandclose"name=button1οnclick="returnMain()">
</BODY>
</HTML>
特别说明：在main.html中showModalDialog的方法时，有使用到Math.random()的目的是避免缓存。
3.showModalDialog详细使用
vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures])
sURL
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
dialogHeight对话框高度，不小于100px，ＩＥ４中dialogHeight和dialogWidth默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
dialogWidth:对话框宽度。
dialogLeft:距离桌面左的距离。
dialogTop:离桌面上的距离。
center:{yes|no|1|0}：窗口是否居中，默认yes，但仍可以指定高度和宽度。
help:{yes|no|1|0}：是否显示帮助按钮，默认yes。
resizable:{yes|no|1|0}［ＩＥ５＋］：是否可被改变大小。默认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。
4.浏览器兼容
但是并不是所有浏览器对兼容这样的用法。
在Chrome中运行上面的例子的话，父窗口可以任意获取焦点，效果和window.open一样，而且获取的returnVale也是undefined.
以下是各主流浏览器对此方法的支持状况。
| 浏览器 | 是否支持 | 状态 |
| IE9 | ○ | |
| Firefox13.0 | ○ | |
| safari5.1 | ○ | |
| chrome19.0 | × | 并不是模态对话框，而是open了一个新窗体 |
| Opera12.0 | × | 什么也发生，连个窗体都不弹 |
如果有传入vArguments这个参数为window的话：
var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);
则在子窗口中，以下的值为：
| 浏览器 | 模态对话框 | window.opener | window.dialogArguments | returnValue |
| IE9 | ○ | undefined | [object Window] | ○ |
| Firefox13.0 | ○ | [objectWindow] | [object Window] | ○ |
| safari5.1 | ○ | [objectWindow] | [object Window] | ○ |
| chrome19.0 | × | [objectWindow] | undefined | × |
注意一下Firefox浏览器下，子窗体假如刷新的话window.dialogArguments照样会丢失，变成undefined。以上结果中我们可以看出返回值returnValue就只有chrome浏览器返回的是undefined，其他浏览器都没有问题
5.如何解决Chrome的兼容问题。
方向是：设置window.opener.returnValue=""
main.html
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="oscar999">
</HEAD>
<script>
function showmodal()
{
var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);
//for Chrome
if(ret==undefined)
{
ret = window.returnValue;
}
alert("sub return value is "+ret);
}
</script>
<BODY>
<INPUT id=button1 type=button value="open sub" name=button1 οnclick="showmodal();">
</BODY>
</HTML>
sub.html
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="oscar999">
</HEAD>
<script>
function returnMain()
{
if(window.opener!=undefined)
{
window.opener.returnValue = "return from sub";
}else{
window.returnValue = "return from sub";
}
window.close();
}
</script>
<BODY>
<INPUT id=button1 type=button value="return and close" name=button1 οnclick="returnMain()">
</BODY>
</HTML>
这里是判断某些对象是否为defined来区分浏览器。当然，也可以判断浏览器的类型的方式进行
这里是借用了父窗口的returnValue来使用， 如果父窗口的returnValue也用其他用途是可以使用替换的方式进行了， as：
var oldValue = window.returnValue;
var newValue = showModalDialog()
window.returnValue = oldValue
6.需要特别注意的是，Chrome下的测试需要把html 文件放入到web server(Tomcat,...)下通过http url 访问测试。否则就不成功了
showModalDialog模态对话框的使用详解以及浏览器兼容相关推荐
- Java中modal dialog,showModalDialog模态对话框的使用详解以及浏览器兼容
1.ModalDialog是什么?showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面. 区别是:showModalDialog打开子窗口后 ...
- pyqt5 输入确认_对PyQt5的输入对话框使用(QInputDialog)详解
PyQt5中QInputDialog的使用,Qt的QInputDialog类提供了一种简单方面的对话框来获得用户的单个输入信息,它提供了4种数据类型的输入: 1)字符串型(方法=QInputDialo ...
- showModalDialog模态对话框 的使用及一般问题的解决
showModalDialog模态对话框 的使用及一般问题的解决 1,使用 showModalDialog(sURL [, oArguments] [,sFeatures]) 参数 : sURL : ...
- [转]showModalDialog()、showModelessDialog()方法使用详解
Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等. 然而IE提供更多的方法支持对话框.如: s ...
- showModalDialog模态对话框的使用以及浏览器兼容
ModalDialog 是什么? showModalDialog 是js window对象的一个方法, 和window.open一样都是打开一个新的页面. 区别是: showModalDialog打开 ...
- MFC中的文件对话框类CFileDialog详解
目录 文件对话框的分类 文件对话框类CFileDialog 对话框选项常用属性(实例:dialog) 对话框常用方法 文件对话框实例 文件对话框的分类 文件对话框分为打开文件对话框和保存文 ...
- IE6,7,8开发人员工具使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)
在上一篇文章IE8"开发人员工具"使用详解上(各级菜单详解) 中,我们详细地讲解了IE8开发人员工具中各个菜单中命令的使用方法,相信很多朋友应该已经使用上了.而IE8开发人员工具更 ...
- android注册弹窗,Android开发之PopupWindow创建弹窗、对话框的方法详解
本文实例讲述了Android开发之PopupWindow创建弹窗.对话框的方法.分享给大家供大家参考,具体如下: 简介: PopupWindow 可创建类似对话框风格的窗口 效果: 使用方法: 使用P ...
- android 日期对话框,Android日期选择器对话框DatePickerDialog使用详解
调用Android原生日期选择器对话框就是DatePickerDialog,具体内容如下 在Android4.4系统上效果如图: 在Android5.0以上效果如图: 1.Activity的onCre ...
最新文章
- 李航《统计学习方法》习题答案
- python自动化教程_Python自动化开发实战视频课程-全新基础篇_Python教程
- linux操作系统项目化教程课后答案,完整版Linux操作系统及应用项目教程习题答案（13页）-原创力文档...
- VTK：绘图之PieChartActor
- Eclipse如何导入第三方jar包
- linux大一实验报告,linux实验报告
- 2006年博客之星（小废物点评版）
- radius认证服务器系统,03-Radius认证配置举例
- 全国计算机一级考试题库及答案（2018）
- Windows cmd常用命令
- png图片怎么转换成jpg？
- 几种ESB（企业服务总线）介绍
- 恒星结构和演化-学习记录3-第三章-物态方程2
- HW-LCD-070 7寸液晶屏 数据手册
- 在 Linux 下执行 bin 文件
- 手机新建相册之后把照片文件放哪
- Nvidia AGX Xavier GMSL 自动驾驶控制器设计方案
- android新浪微博开发Sso登录
- 想要用Python写爬虫但是BeautifulSoup库出锅肿么办？
- 抽象类之定义一个Point类，最后重新定义Rectangle类，使其同时继承Shape和Point类（Point视作Rectangle的左上角），并在Rectangle中添加一些新的成员。