解决window.showModalDialog在Firefox无法支持  

2014-11-27 22:24:21|  分类： UI设计 |  标签： |举报 |字号大中小 订阅

用微信  “扫一扫”

将文章分享到朋友圈。

用易信  “扫一扫”

将文章分享到朋友圈。

下载LOFTER 我的照片书  |

网页设计时，实现页面以弹出的方式进行下一个界面的链接

在网页程序中,
有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口,
而在IE中,我们可以使用showModalDialog来达成,
语法如下 :

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

范例:

window.showModalDialog("openwin.html","Arguments","dialogHeight: 200px; dialogWidth: 200px; dialogTop: 10px; dialogLeft: 10px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;");

但是.在Firefox中却没有showModalDialog这东西,
而在FireFox中我们只能使用window.open实现这样的功能,
window.open的语法如下 :

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

只是,在Firefox下,window.open的参数中,sFeature多了一些功能设定,
而在FireFox下要让开启的窗口跟IE的showModalDialog一样的话,
只要在sFeatures中加个modal=yes就可以了,
范例如下:

window.open('openwin.html','newWin','modal=yes,width=200,height=200,resizable=no,scrollbars=no');

提到了子窗口,不得不提的就是子窗口跟母窗口间的交互操作,
因为我想很多人开启对话窗口应该都是为了将操作完的结果丢回去给母窗口...

如果是用showModalDialog的话,
在子窗口中要存取母窗口的函数的话,
要注意两个地方,
1.(母窗口中)开启窗口:

window.showModalDialog("openwin.html",self,'modal=yes,width=775,height=700,resizable=no,scrollbars=no');

在第二个参数(vArguments),改成self.

2.(子窗口中)调用母窗口的函数:

window.dialogArguments.ShowMsg(obj.value);

ShowMsg为母窗口中的函数.

而使用window.open的话,
则是要注意一个地方,
1.(子窗口中)调用母窗口的函数:

window.opener.ShowMsg(obj.value);

使用window.opener去接母窗口的对象.

如此一来,只要再透过navigator.appName去判断浏览器为何,
就可以写一个IE与FireFox兼容的函数...

例子如下：

在一个父窗口中打开一个子窗口，并把子窗口的值传递给父窗口

在父窗口中：

<script language="javascript">
function colorpick(obj){
if (window.showModalDialog!=null) //IE判断
{
var smd= window.showModalDialog("Default2.aspx","","dialogWidth:225px;dialogHeight:170px;status:no;help:no;scrolling=no;scrollbars=no");
if(smd!=null)
obj.style.background=rtn;
return;
}
else
{
this.returnAction=function(strResult){
if(strResult!=null)
obj.style.background=strResult;
}
window.open("Default2.aspx","","width=225,height=170,menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes");
return;
}

}
</script>

在子窗口中：

function act(RGB) {
if (window.showModalDialog!=null)//IE判断
{
parent.window.returnValue="#"+RGB;
window.close();//firefox不支持

}
else
{
window.opener.returnAction("#"+RGB);
top.close();//IE和FireFox都支持
}
}