百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome


Posted in Javascript onApril 13, 2010

三水点靠木之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进。
先看下效果图:
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

原有百度的Popup.js在有

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

声明的网页下存在兼容性问题,即在IE6,7,8下,遮罩层是可以全屏,但在Firefox和Chrome下无法全屏遮罩。

造成遮罩层在FF和Chrome下无法全屏的问题在267行:


var C = '<div id="dialogBoxBG" style="position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:' + A + ";" + H + "background-color:" + this.color.cColor + ';display:none;"></div>';

遮罩层dialogBoxBG 的style只是单纯的设置为height:100%,所以在有<!DOCTYPE...>声明下的页面无法兼容FF和Chrome。
然而目前网上有一个“luocheng”的“完美版”popup.js,下载下来试用了下,结果并没有完全兼容FF和Chrome,还是存在遮罩层无法全屏的bug,读了一下源代码,找到了错误所在:luocheng的版本中增加了一个getValue方法,switch语句中的case "clientHeight":竟然有两个!删掉一个以后继续测试,还是无法兼容FF和Chrome,继续读代码排错,增加的setBackgroundSize方法中G('dialogBoxBG').style.height = getValueHeight;只是复制给遮罩层dialogBoxBG的height=整数值,这个是不遵循web标准的,所以在FF和Chrome下存在bug。
setBackgroundSize: function() { 
var getValueWidth; 
var getMaxValueWidth = [getValue("clientWidth"), getValue("scrollWidth")]; 
getValueWidth = eval("Math.max(" + getMaxValueWidth.toString() + ")"); 
G('dialogBoxBG').style.width = getValueWidth; 
var getValueHeight; 
var getMaxValueHeight = [getValue("clientHeight"), getValue("scrollHeight")]; 
getValueHeight = eval("Math.max(" + getMaxValueHeight.toString() + ")"); 
G('dialogBoxBG').style.height = getValueHeight; },

解决方法很简单:G('dialogBoxBG').style.height = getValueHeight;修改成G('dialogBoxBG').style.height = getValueHeight + "px";即可。
所以大家以后在开发过程中,注意对于宽度与高度最好加上'px';这样的单位。

令附上获取页面高度在不同浏览器之间的差异参考资料:

clientHeight:在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度;

scrollHeight:在IE下,scrollHeight 是页面实际内容的高度,可以小于clientHeight;在FF下,scrollHeight 是网页内容高度,不过最小值是clientHeight。
/*******************************************************/
拓展方法:
1.弹出确认框回调执行服务器端方法

function ShowConfirm(title, content, target) //显示确认对话框 
{ 
var pop = new Popup({ 
contentType: 3, 
isReloadOnClose: false, 
width: 350, 
height: 110 
}); 
pop.setContent("title", title); 
pop.setContent("confirmCon", content); 
pop.setContent("callBack", ShowCallBackServer); //回调函数 
pop.setContent("parameter", { 
id: "divCall", 
str: target, 
obj: pop 
}); 
pop.build(); 
pop.show(); 
popp = pop; 
return false; 
} 
//执行服务器端方法,即进行__doPostBack('','')操作 
function ShowCallBackServer(para) { 
var str = para["str"]; 
if ("" != str && null != str) { 
str = GetEachBtnName(str); 
if ("" != str && null != str) { 
//alert(str); 
__doPostBack(str, ''); 
} 
} 
ClosePop(); 
} 
//遍历页面中的Button名称 
function GetEachBtnName(obj) { 
return obj.name == '' || obj.name == null ? obj.id : obj.name; 
}

使用方法:

在一个有OnClick="btnTest_Click" 的Button控件上注册OnClientClick为return ShowConfirm(' ','是否确定删除?',this)。
完整代码:

<asp:Button ID="btnDel" runat="server" Text="删除" OnClick="btnDel_Click" OnClientClick="return ShowConfirm(' ','是否确定删除?',this)" />

2.在iframe中使用popup.js
我们在一个页面中内嵌了一个iframe,想让iframe中弹出的对话框或者确认框在父页面中弹出来,实现遮罩层全屏而不是只是在iframe页面中全屏,然后确认后执行回调操作iframe,可以是执行iframe中的服务器端方法。
function ShowConfirmIFrame(title, content, target) //显示确认对话框 
{ 
var pop = new Popup({ 
contentType: 3, 
isReloadOnClose: false, 
width: 350, 
height: 110 
}); 
pop.setContent("title", title); 
pop.setContent("confirmCon", content); 
pop.setContent("callBack", ShowIFrame); //回调函数 
pop.setContent("parameter", { 
id: "divCall", 
str: target, 
obj: pop 
}); 
temp = target; 
pop.build(); 
pop.show(); 
popp = pop; 
return false; 
} 
var temp; 
function ShowIFrame() { 
parent.frames["content"].window.ShowCallBackServerIFrame(temp); 
// parent.window.iframe.ShowCallBackServer(); 
} 
function ShowCallBackServerIFrame(para) { 
var str = para; 
if ("" != str && null != str) { 
str = GetEachBtnName(str); 
if ("" != str && null != str) { 
__doPostBack(str, ''); 
} 
} 
closeWin(); 
}

使用方法:
iframe中定义js方法:
//删除 
function subDel(obj) 
{ 
return parent.parentDel(obj); 
}

Button按钮控件注册OnClientClick事件:
<asp:Button ID="btnDel" runat="server" OnClick="btnDel_Click" ToolTip="删除" CssClass="deleteBtn" OnClientClick="return subDel(this);return false;" />

父页面定义js方法:
function parentDel(obj) 
{ 
return ShowConfirmIFrame('删除','是否确定删除?',obj); 
}

popup.js进化版与普通修正版下载  原版也修正了上面所说的并没有完全兼容FF和Chrome的问题。
Javascript 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
移动端js触摸事件详解
Sep 18 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 #Javascript
JavaScript 数组运用实现代码
Apr 13 #Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 #Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 #Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 #Javascript
javascript URL编码和解码使用说明
Apr 12 #Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 #Javascript
You might like
基于PHP技术开发客服工单系统
2016/01/06 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
Python IDLE入门简介
2017/12/08 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
python3人脸识别的两种方法
2019/04/25 Python
python内存管理机制原理详解
2019/08/12 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
股指期货心得体会
2014/09/13 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
单独二胎证明
2015/06/24 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS