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 />