模式对话框

hackbomb

浏览: 217270 次
性别:
来自: 上海

最近访客更多访客>>

181822498

zcediaos

土豆-.-

Bll

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

IE Firefox PHP JavaScript Web

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

window.onload=function(){
    modalWin("window.php");
}
//在同目录中建立一个window.php文件即可看到效果

模式对话框的注意事项：
模式对话框在firefox下应用还不是很成熟，原因是firefox的鼠标右击事件通过 document.oncontextmenu进行捕捉也不能完全实现IE下的效果。还有就是frame下和iframe下的模式对话框应用。还存在一定缺陷。以后进一步改进。
关于IE与Firefox下判断鼠标单击事件的demo
function buttonEnv(event)
{
    alert(event.button)
}

<body onmousedown="buttonEnv(event);">
IE left 1 right 2<br/>
FF left 0 right 2<br/>

分享到：

javascript学习笔记之表格排序 | iFrame高度自适应问题

2009-01-05 12:05
浏览 1462
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论