web中的模式对话框

模式对话框在IE下可以使用window.showModalDialog的方法来解决。但是众所周知,FireFox为了支持web标准,在1.1版以后就取消了对模式对话框的支持。即:window.showModalDialog()
我们先来分析一下实现模式对话框的原理,我们在IE的模式对话框下无论点父窗口的什么地方,focus(焦点)总是回到了子窗口上面。那么在FireFox下我们将focus总是设置在子窗口上不就行了嘛。怎么设置呢?javascript 有一个定时执行函数的操作似乎可以不断地将子窗口设置为focus(我也没有去测试是否可以,就不能说一定可以了),但是我们没有必要这么麻烦,因为只需当用户点击父窗口的时候设置一下就行了,很幸运,FireFox支持window.onclick事件。那么我们一起来动手写一个既支持IE又支持FireFox模式对话框函数:
举例说明:
varDialogWin=null;
functionmodalWin(url){
if(window.showModalDialog){
window.showModalDialog(url,
'write',"dialogWidth:500px;dialogHeight:300px");
}
else{
varw=window.screen.width;
varh=window.screen.height;
varwinwidth=500;
varwinheight=300;
varwin=(h-winheight)/2;
varwinleft=(w-winwidth)/2;
window.myAction
=this;
DialogWin
=window.open(url,'write',"top="+win+",left="+winleft+',width=500px,height=300px,modal=yes');
window.onclick
=function(){DialogWin.focus()};
}
}
functiona(){
alert(
"不支持鼠标右键行为");
window.onclick
=function(){
DialogWin.focus()
};
returnfalse;
}
document.oncontextmenu
=newFunction("returna();");

window.onload
=function(){
modalWin(
"window.php");
}
//在同目录中建立一个window.php文件即可看到效果
模式对话框的注意事项:
模式对话框在firefox下应用还不是很成熟,原因是firefox的鼠标右击事件通过 document.oncontextmenu进行捕捉也不能完全实现IE下的效果。还有就是frame下和iframe下的模式对话框应用。还存在一定缺陷。以后进一步改进。
关于IEFirefox下判断鼠标单击事件的demo
functionbuttonEnv(event)
{
alert(event.button)
}

<bodyonmousedown="buttonEnv(event);">
IEleft1right2
<br/>
FFleft0right2
<br/>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页