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=button1onclick="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=button1onclick="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 onclick="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 onclick="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 访问测试。否则就不成功了。

赞 (0)

相关推荐

  • js模式化窗口问题![window.dialogArguments]

    前些天做项目时遇到了个浏览器兼容问题,解决后记录一下,也将模式化的资料放上! 详细问题描述: 在火狐浏览器中弹出一个子窗口,子页面中是一个分页,点下一页后子页面会刷新,然后window.dialogArguments对象就丢失了,alert输出显示undefined [解决方法见第三项] 最近做网站的时候需要用到模式化窗口功能,也遇到了一些问题,所以查了查资料以解决 1.弹出窗口几种方法: a.window.open(pageURL,name,parameters); b.window.show

  • 谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

    showModalDialog,在测试中,IE,Firefox中正常运行,但是在google中,点击后没什么反应,在网上看了一下,谷歌浏览器不支持showModalDialog模态对话框和无法返回returnValue,得到了一个解决办法 <script type="text/javascript"> //开启模式窗口 function showMyModal() { var url = "SelectUser.aspx"; //传入参数示例 var m

  • showModalDialog在谷歌浏览器下会返回Null的解决方法

    showModalDialog的返回值在IE.火狐下面都能够获取返回值,但是在谷歌浏览器下面会返回Null,下面介绍解决方法 父页面: 复制代码 代码如下: function openwindows(){ var obj = new Object(); //打开模态子窗体,并获取返回值 var retval = window.showModalDialog("ordervideo.jsp?rderIds="+"0010,0020,0030",obj,"di

  • 谷歌浏览器不支持showModalDialog模态对话框的解决方法

    忽然发现Chrome浏览器版本 37.0.2062.103 m 不支持showModalDialog模态对话框和无法返回returnValue 项目原先用到的都不能正常执行 找了个折中方案利用window.open代替showModalDialog利用 window.opener.document来操作父页面的元素 复制代码 代码如下: window.open("xsp/exesp?todo=13","","height=500,width=280,sta

  • JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    本文实例讲述了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法.分享给大家供大家参考,具体如下: 主页面: <script type="text/javascript"> function SelectGroupCust() { var temp = window.showModalDialog("Default2.aspx?xx=" + Date(), "", "dialog

  • Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

    What?模态对话框失效了? 上个礼拜修改测试一个后台管理项目,在测试与各个浏览器兼容性的时候,发现在chrome浏览器下showModalDialog方法显示的并不是模态对话框,就像新打开一个页面一样,父窗口仍然可以随意获取焦点,并可以打开多个窗体,而且返回值returnValue也无法返回,一直是undefined.这么多问题很令人头疼,下面就各个主流最新版的浏览器进行了一下测试. 浏览器 是否支持 状态 IE9 ○ Firefox13.0 ○ safari5.1 ○ chrome19.0

  • Chrome中模态对话框showModalDialog返回值问题的解决方法

    没有找到太好的解决办法,暂时处理方法是,在弹出窗口中同时给 window.opener.ReturnValue 赋返回值.这样在关闭窗口后,通过下面的代码取得返回值: 复制代码 代码如下: var val = window.showModalDialog(...); if(!val) val= window.ReturnValue; 这样在IE.FF.及Chrome中,都可以得到返回值了.

  • window.showModalDialog两次加载问题清除缓存方法

    今天遇到这样一件事情, 复制代码 代码如下: var frmHeight = 352; var frmWidth = 508; var frmTop = (window.screen.height - frmHeight) / 2; var frmLeft = (window.screen.width - frmWidth / 2); var url = "ChosePerson.aspx"; var parameter = "dialogHeight:" + fr

  • window.dialogArguments 使用说明

    f1.php页面JS代码,第二个传的参数必须是self不能是别的 复制代码 代码如下: <script type="text/javascript"> function dianJi(){ //弹出窗口关闭前,原窗口不能获得焦点 //showModalDialog("f2.php",self,"dialogwidth=500px;dialogheight=500px;dialogtop=100px;dialogleft=100px;center

  • showModalDialog模态对话框的使用详解以及浏览器兼容

    1.ModalDialog是什么?showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面.区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法操作了).可以在子窗口中通过设置window.returnValue的值,让父窗口可以获取这个returnvalue. 2.一个例子1)主窗口main.html,2)在主窗口中通过showModalDialog的方式打开子窗口sub.html3)在子窗口中设置ret

  • js模态对话框使用方法详解

    模态框(Modal  Dialogue Box)也可叫做模态对话框,或者对话框,当一个模态框被打开时,用户可以与该对话框进行交互,点击关闭按钮可关闭该模态框! 功能实现: 1. 页面上有一个按钮,用于打开模态框,模态框默认隐藏: 2. 用户点击按钮,可打开模态框:用户点击模态框中的关闭或者点击页面其他地方可关闭该模态框 ✦  点击页面其他地方,关闭模态框,可用window.onclick事件 ✦  给关闭按钮绑定点击事件,按钮被点击,模态框Modal添加样式display:none; ✦  给b

  • 对PyQt5的输入对话框使用(QInputDialog)详解

    PyQt5中QInputDialog的使用,Qt的QInputDialog类提供了一种简单方面的对话框来获得用户的单个输入信息,它提供了4种数据类型的输入: 1)字符串型(方法=QInputDialog.getText): 2)Int类型数据(方法=QInputDialog.getInt): 3)double类型数据(方法=QInputDialog.getDouble): 4)下拉列表框的条目(方法=QInputDialog.getItem). QInputDialog继承自QDialog,提供

  • 详解JS浏览器储存

    详解JS浏览器储存

    引言 随着对前端的了解越来越深入,了解到了很多种浏览器的存储方案,如 Cookie.LocalStorage等,哪这些存储方案有何异同,分别的适用场景又是什么呢. Cookie Cookie的来源 Cookie 被创造出来的本意并不是本地储存,而是为了辨别用户身份.众所周知,Http 协议是无状态的,也就是说你每一次发送给服务器的请求对于服务器来说都是孤立的,服务器不知道这这些请求来自于谁.比如你向购物车里面添加了一些商品,但是当发送结账请求的时候服务器懵了,我怎么知道你是谁,你买了什么呢.而使

  • 详解JS浏览器事件模型

    详解JS浏览器事件模型

    什么是事件 我想你很可能听说过事件驱动, 但是事件驱动到底是什么?为什么说浏览器是事件驱动的呢? 事件驱动通俗地来说就是什么都抽象为事件. 一次点击是一个事件 键盘按下是一个事件 一个网络请求成功是一个事件 页面加载是一个事件 页面报错是一个事件 浏览器依靠事件来驱动APP运行下去,如果没有了事件驱动,那么APP会直接从头到尾运行完,然后结束,事件驱动是浏览器的基石. 一个简单的例子 其实现实中的红绿灯就是一种事件,它告诉我们现在是红灯状态,绿灯状态,还是黄灯状态. 我们需要根据这个事件自己去完

  • javascript showModalDialog模态对话框使用说明

    javascript showModalDialog模态对话框使用说明

    1. 标准的方法 复制代码 代码如下: <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+height+&

  • 详解JS浏览器事件循环机制

    详解JS浏览器事件循环机制

    先来明白些概念性内容. 进程.线程 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的. 线程是进程的执行流,是CPU调度和分派的基本单位,同个进程之中的多个线程之间是共享该进程的资源的. 浏览器内核 浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签会合并成一个进程),浏览器内核(浏览器渲染进程)属于浏览器多进程中的一种. 浏览器内核有多种线程在工作. GUI 渲染线程: 负责渲染页面,解析 HTML,C

  • js showModalDialog弹出窗口实例详解

    showModalDialog:模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法. 使用方法:  vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 参数说明:  sURL--  必选参数,类

随机推荐