如何编写适合FireFox的对话框?

在设计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都支持。

(0)

相关推荐

  • 如何编写适合FireFox的对话框?

    在设计Blog操作流程的时候,计划在添加页面和修改页面都用弹出对话框的方式.添加和修改结束时,点击提交,对话框关闭,同时后面的列表窗口刷新.这样就感觉在用Windows的界面程序一样,界面友好性很好. 但是在实际操作的时候发生了一个问题,IE的对话框技术,对FireFox是不支持的,怎么才能做到既支持IE又支持FireFox的对话框呢? 还好,昨天在研究TinyMCE,里面有支持FireFox的对话框技术可以借鉴. 我写的打开对话框的方法:  function popupDialog(url,w

  • JQuery入门—编写一个简单的JQuery应用案例

    一.官方网站下载:http://jquery.com 二.引入JQuery文件库 下载完后不用安装,只需将文件导入页面中即可,即在<head></head>中加入如下代码:<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"></script> 三.编写一个弹出对话框的简单应用. 复制代码 代码如

  • firefox扩展插件制作方法详细介绍

    首先第一步 说一下怎么样查看firefox插件的源码, 就我上边写的那个东西,把它下载下来.将它的扩展名改为zip并解压.会得到一个blueideaserach的文件夹, 这个文件夹中便是我做的这个插件的源码[attach]62937[/attach] 这个目录中除了 chrome目录  chrome.manifest install.rdf  这三个以外都不是必须的. chrome.manifest   这个文件中是对所有文件的一个列表. install.rdf             这个是

  • JavaScript实现简易聊天对话框(加滚动条)

    今天看了几个JS的视频,老师布置了一个编写一个简易聊天对话框的任务,没有涉及到Ajax.主要实现了切换头像模拟两方的聊天情况,样式比较简单,后期可以进行美化. 需要注意的地方是我是用的ul li列表来实现元素的添加,这样更利于样式的设置,每添加一个对话框需要清除一下浮动,不然会出现连续几个对话框出现在一行的现象. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

  • TinyMCE 新增本地图片上传功能

    这样TinyMCE 就可以正常显示图片了.其实该功能属于普通HTML富文本控件基本功能了.现有需求将TinyMCE 扩展成可直接上传本地图片而后在文本区域显示图片. 实现思路: 使用Ajax 进行图片上传,此上传方式可以更友好的实现TinyMCE 的图片上传扩展, 具体方法可以参考我的上一篇 Jquery ajaxsubmit 上传图片.将Ajax上传图片集成到 TinyMCE 中, 主要是修改TinyMCE 目录下的 tinymce\jscripts\tiny_mce\plugins 的 ad

  • 数据库查询优化(主从表的设计)

    举一个例子,我现在有一些新闻信息,它包括这些字段:新闻ID,新闻Name,新闻ShortIntro,新闻Detail,新闻PublishTime.我现在要把它存放在数据库中,然后从数据库中将其取出来放在GridView中分页显示. 我现在就以一种我所见过的常见的思维方式来一步一步模拟这个实现过程. 第一步:建立新闻数据表. 在这一步,很多人都会直接建一张News表,里面包括了上面说的那些字段. 第二步:查询数据. 写一个方法,把News表中满足查询条件的数据取出来放在DataSet(DataTa

  • 使用Python脚本在Linux下实现部分Bash Shell的教程

    对于Linux用户来说,命令行的名声相当的高.不像其他操作系统,命令行是一个可怕的命题,但是对于Linux社区中那些经验丰富的大牛,命令行却是最值得推荐鼓励使用的.通常,命令行对比图形用户界面,更能提供更优雅和更高效的解决方案. 命令行伴随着Linux社区的成长,UNIX shells,例如 bash和zsh,已经成长为一个强大的工具,也是UNIX shell的重要组成部分.使用bash和其他类似的shells,可以得到一些很有用的功能,例如,管道,文件名通配符和从文件中读取命令,也就是脚本.

  • JavaScript 在各个浏览器中执行的耐性

    IE:执行超过500W条JScript引擎语句出现提示. Firefox:执行超过10秒出现提示. Safari:执行超过5秒出现提示. Opera:无论执行多久都不会出现提示,最有耐性. Chrome:执行超过约8秒(估计值)出现提示. 注:当弹出类似alert的模式对话框的时候,是不计时. 在Web开发的时候,经常会遇到的一种情况就是浏览器提示脚本运行时间过长,停止还是继续,无论你选择什么,相信你都会想尽一切办法让这个对话框远离你的用户们.可你是否知道,这些不同的浏览器究竟是如何判断,哪些脚

  • 谈谈我对JavaScript DOM事件的理解

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应. DOM与事件是JavaScript最核

  • 理解javascript中DOM事件

    首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. ​标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. 最初我们给页面实现点击,就像下面这样的简单操作. 先定义一个块如<div id="weiyuzhou">微宇宙</div>,之后在<script type="text/javascript"></script>内部实现id为we

随机推荐