百度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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
原生js实现分页效果
Sep 23 Javascript
js实现简易点击切换显示或隐藏
Nov 29 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 empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Python中如何获取类属性的列表
2016/12/26 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
python psutil监控进程实例
2019/12/17 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
预备党员思想汇报范文
2014/01/11 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
小学一年级评语大全
2014/04/22 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
领导干部对照检查材料
2014/08/24 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
婚前协议书标准版
2014/10/19 职场文书
元旦主持词开场白
2015/05/29 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技