JS 创建模态窗口showModalDialog()兼容性的问题

Posted 2023-04-12

window.showModalDialog("upload_templet.html");
我试过4个浏览器，谷歌，搜狗，IE8，火狐
其中IE8一点反应都没有，好像连JS代码都失效了一样，谷歌和搜狗都能弹出一个新窗口，但不是模态的，只有火狐显示出来的是想要的效果，窗口既独立，又是模态的
请问是代码问题，还是浏览器兼容性问题，该怎么解决？

参考技术A 你首先要检查你的CSS代码，因为模态窗口主要是需要写好兼容的CSS代码段儿。还有你的模态窗口初始化是否做了什么特殊的处理，你可以先将这些处理注释掉，然后试试看空的窗口显示是否正常，一次来判断js代码是否存在效率或是不兼容的问题。追问

我把模态窗口多余的东西都删掉了，就是一个空页面，效果跟之前一样，至于兼容的CSS代码段不知道怎么写，求指导

问题与解决showModalDialog is not defined 的解决方案

背景：

showModalDialog 是比较老的方法了，有些浏览器不再支持弹出模态窗口了。

比如说谷歌浏览就不再支持了，有文章说明如下：

Chrome’s Lack of Support for showModalDialog Breaks Some Enterprise Web Apps

 

弹出窗口代码：

var obj = new Object();  
var retval = window.showModalDialog("request.aspx",obj,"dialogWidth=500px;dialogHeight=300px"); 
if (retval == null) {
...
}else {
...
}

浏览器报错：

Uncaught TypeError: undefined is not a function

其中有些临时解决办法，但貌似showModalDialog不会回来了。

 

问题解决

常见的弹出窗口有div模拟或者用window.open代替，对于一个已经在用的系统来说，采用div方式转换成本较高，采用window.open改动会更少一些，但也会丢失其模态性。

这里采用简单的window.open方案，毕竟替换成本低很多。针对上文中提到的showModalDialog使用方式，替换为：

var iWidth = 500; 
var iHeight = 300; 
var iTop = (window.screen.availHeight - 30 - iHeight) / 2; 
var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; 
var win = window.open("request.aspx", "弹出窗口", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,alwaysRaised=yes,depended=yes");

 

参数说明

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。

 

采用这种方式就可以打开一个和之前使用showModalDialog差不多的窗口。但是怎么返回值呢？

在弹出页面中有两种方式：

1、直接设置父窗口的DOM对象的值。

window.opener.document.getElementById(“parentWindowControlId”).value = "数据";

父窗口中应该有一个id为parentWindowControllId的DOM元素。

 

2、调用父窗口中的Javascript函数，由父窗口进行相应的处理。

var obj = { id:"id", name:"name" };  window.opener.DoAfterXXX(obj);

父窗口提供一个DoAfterXXX的函数就可以了。

 

长远来看window.open由于其用户体验问题必将走向没落，还是尽快转移为好。