好学IT学院:IT信息技术分享交流平台
来源:互联网  作者:NC_Editor  发布时间:2008-02-22  ★★★加入收藏〗〖手机版
摘要:在设计Blog操作流程的时候,计划在添加页面和修改页面都用弹出对话框的方式。添加和修改结束时,点击提交,对话框关闭,同时后面的列表窗口刷新。这样就感觉在用Windows的界面程序一样,界面友好性很好。…

在设计Blog操作流程的时候,计划在添加页面和修改页面都用弹出对话框的方式。添加和修改结束时,点击提交,对话框关闭,同时后面的列表窗口刷新。这样就感觉在用Windows的界面程序一样,界面友好性很好。

但是在实际操作的时候发生了一个问题,IE的对话框技术,对FireFox是不支持的,怎么才能做到既支持IE又支持FireFox的对话框呢?

还好,昨天在研究TinyMCE,里面有支持FireFox的对话框技术可以借鉴。

我写的打开对话框的方法:
function popupDialog(url,width,height){

//showx = event.screenX - event.offsetX - 4 - 10 ; // + deltaX;  这段代码只对IE有效,已经不用了

//showy = event.screenY - event.offsetY -168; // + deltaY; 这段代码只对IE有效,已经不用了
   
      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的页面,因为在 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" );

关闭窗口时:
IE: parent.dialogArguments.location.reload();
FireFox:parent.opener.document.location.reload();

还有一个很重要的注意点。FireFox好像不支持对话框的window.close();
所以最后使用的关闭窗口用的是 top.close();  这个IE、FireFox都支持。

w3c技术架构介绍
  W3C技术架构图描绘了一个两层的模型:万维网体系结构(被标注为“One Web”)建立在互联网(Interner)体系结构之上。图…
  • 好学考试H5触屏版开放内测
  • 好学触屏公众号虎力全开、杨帆起航!