百度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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
JS验证码实现代码
Sep 14 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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
人大复印资料处理程序_补充篇
2006/10/09 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
PHP 图片处理
2020/09/16 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
在家更换处方镜片:Lensabl
2019/05/01 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
医学专业毕业生推荐信
2014/07/12 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
模范教师事迹材料
2014/12/16 职场文书
安全生产先进个人总结
2015/02/15 职场文书
企业计划生育责任书
2015/05/09 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android