百度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 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
分享Javascript实用方法二
Dec 13 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
在vue中阻止浏览器后退的实例
Nov 06 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学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
Linux Interview Questions For software testers
2012/06/02 面试题
手机被没收检讨书
2014/02/22 职场文书
结婚保证书范文
2014/04/29 职场文书
施工安全责任书范本
2014/07/24 职场文书
七年级地理教学计划
2015/01/22 职场文书
大学生个人学习总结
2015/02/15 职场文书
幼儿教师辞职信
2015/02/27 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python
HTML基本元素标签介绍
2022/02/28 HTML / CSS
asyncio异步编程之Task对象详解
2022/03/13 Python
你真的会用Mysql的explain吗
2022/03/31 MySQL