首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

百度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的问题。

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 Javascript
jquery中this的使用说明
Sep 06 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
js分页工具实例
Jan 28 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
jQuery实现大图轮播
Feb 13 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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
主持词(345) 聘任书(31) 委托书(259) 担保书(46) 承诺书(369) 意向书(73) 公证书(45) 竞聘书(31) 建议书(203) 广告词(105)
You might like
php自动注册登录验证机制实现代码
2011/12/20 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
php实现的mongodb操作类
2015/05/28 PHP
php文件读取方法实例分析
2015/06/20 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
jquery使用EasyUI Tree异步加载JSON数据（生成树）
2017/02/11 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
vue中的inject学习教程
2019/04/24 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
使用python实现语音文件的特征提取方法
2019/01/09 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
一年级评语大全
2014/04/23 职场文书
美丽心灵观后感
2015/06/01 职场文书
应届生们该怎么书写求职信？
2019/07/05 职场文书