在設(shè)計(jì)Blog操作流程的時(shí)候，計(jì)劃在添加頁面和修改頁面都用彈出對話框的方式。添加和修改結(jié)束時(shí)，點(diǎn)擊提交，對話框關(guān)閉，同時(shí)后面的列表窗口刷新。這樣就感覺在用Windows的界面程序一樣，界面友好性很好。 

但是在實(shí)際操作的時(shí)候發(fā)生了一個(gè)問題，IE的對話框技術(shù)，對FireFox是不支持的，怎么才能做到既支持IE又支持FireFox的對話框呢？ 

還好，昨天在研究TinyMCE,里面有支持FireFox的對話框技術(shù)可以借鑒。 

我寫的打開對話框的方法： 
function popupDialog(url,width,height){ 
    //showx = event.screenX - event.offsetX - 4 - 10 ; // + deltaX;  這段代碼只對IE有效，已經(jīng)不用了 
    //showy = event.screenY - event.offsetY -168; // + deltaY; 這段代碼只對IE有效，已經(jīng)不用了 

        var x = parseInt(screen.width / 2.0) - (width / 2.0);  
    var y = parseInt(screen.height / 2.0) - (height / 2.0); 
        var isMSIE= (navigator.appName == "Microsoft Internet Explorer");  //判斷瀏覽器 

        if (isMSIE) {           
            retval = window.showModalDialog(url, window, "dialogWidth:"+width+"px; dialogHeight:"+height+"px; dialogLeft:"+x+"px; dialogTop:"+y+"px; status:no; directories:yes;scrollbars:no;Resizable=no; "  ); 
       } else { 
        var win = window.open(url, "mcePopup", "top=" + y + ",left=" + x + ",scrollbars=" + scrollbars + ",dialog=yes,modal=yes,width=" + width + ",height=" + height + ",resizable=no" ); 
        eval('try { win.resizeTo(width, height); } catch(e) { }'); 
        win.focus();             
    } 
} 

在被打開的對話框里，我是用了上下分Frame的頁面，因?yàn)樵?nbsp;IE里，對話框是不可以提交的，但是分成Frame后，就可以提交了。 
在提交的按鈕上，加上這段代碼： 

  function doReload(){    
     var isMSIE= (navigator.appName == "Microsoft Internet Explorer"); 
     if (isMSIE){ 
         parent.dialogArguments.location.reload(); 
     }else{ 
         parent.opener.document.location.reload(); 
     }      
     top.close();     
  } 

兩種瀏覽器的打開對話框的方式不一樣 
IE：window.showModalDialog(url, window, "dialogWidth:300px; dialogHeight:300px; dialogLeft:200px; dialogTop:200px; status:no; directories:yes;scrollbars:no;Resizable=no; "  ); 
FireFox: window.open(url, "mcePopup", "top=200,left=200,scrollbars=no,dialog=yes,modal=yes,width=300,height=300,resizable=no" ); 

關(guān)閉窗口時(shí)： 
IE： parent.dialogArguments.location.reload(); 
FireFox：parent.opener.document.location.reload(); 

還有一個(gè)很重要的注意點(diǎn)。FireFox好像不支持對話框的window.close(); 
所以最后使用的關(guān)閉窗口用的是 top.close();  這個(gè)IE、FireFox都支持。 

最新評論