当前位置：首页 > 资讯 > 技术文档

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

时间：2022-11-25 10:47 编辑：来源：阅读：
扫一扫，手机访问

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

[b]1.ModalDialog是什么？ [/b]showModalDialog是jswindow对象的一个方法，和window.open一样都是打开一个新的页面。区别是：showModalDialog打开子窗口后，父窗口就不能获取焦点了（也就是无法操作了）。可以在子窗口中通过设置window.returnValue的值，让父窗口可以获取这个returnvalue. [b]2.一个例子 [/b]1)主窗口main.html, 2)在主窗口中通过showModalDialog的方式打开子窗口sub.html 3)在子窗口中设置returnValue返回给主窗口使用 main.html

[u]复制代码[/u] 代码如下:

<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

[u]复制代码[/u] 代码如下:

<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()的目的是避免缓存。 [b]3.showModalDialog详细使用 [/b]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。 [b]4.浏览器兼容 [/b]但是并不是所有浏览器对兼容这样的用法。在Chrome中运行上面的例子的话，父窗口可以任意获取焦点，效果和window.open一样，而且获取的returnVale也是undefined. 以下是各主流浏览器对此方法的支持状况。

浏览器	是否支持	状态
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	并不是模态对话框，而是open了一个新窗体
Opera12.0	×	什么也发生，连个窗体都不弹

如果有传入vArguments这个参数为window的话：

[u]复制代码[/u] 代码如下:

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，其他浏览器都没有问题 [b]5.如何解决Chrome的兼容问题。 [/b]方向是：设置window.opener.returnValue="" main.html

[u]复制代码[/u] 代码如下:

<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

[u]复制代码[/u] 代码如下:

<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 [b]6.需要特别注意的是，Chrome下的测试需要把html 文件放入到web server(Tomcat,...)下通过http url 访问测试。否则就不成功了。 [/b]

全部评论(0)

上一篇：js事件冒泡实例分享(已测试)
下一篇：JS实现定时自动关闭DIV层提示框的方法

资讯排行榜
更多>>