百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome_javascript技巧
脚本之家之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进。
先看下效果图:
原有百度的Popup.js在有
声明的网页下存在兼容性问题,即在IE6,7,8下,遮罩层是可以全屏,但在Firefox和Chrome下无法全屏遮罩。
造成遮罩层在FF和Chrome下无法全屏的问题在267行:
遮罩层dialogBoxBG 的style只是单纯的设置为height:100%,所以在有..>声明下的页面无法兼容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)。
完整代码:
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事件:
父页面定义js方法:
function parentDel(obj)
{
return ShowConfirmIFrame('删除','是否确定删除?',obj);
}
popup.js进化版与普通修正版下载 原版也修正了上面所说的并没有完全兼容FF和Chrome的问题。

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题











机器之能报道编辑:吴昕国内版的人形机器人+大模型组队,首次完成叠衣服这类复杂柔性材料的操作任务。随着融合了OpenAI多模态大模型的Figure01揭开神秘面纱,国内同行的相关进展一直备受关注。就在昨天,国内"人形机器人第一股"优必选发布了人形机器人WalkerS深入融合百度文心大模型后的首个Demo,展示了一些有趣的新功能。现在,得到百度文心大模型能力加持的WalkerS是这个样子的。和Figure01一样,WalkerS没有走动,而是站在桌子后面完成一系列任务。它可以听从人类的命令,折叠衣物

5月15日,百度Apollo在武汉百度萝卜快跑汽车机器人智行谷举办ApolloDay2024,全方位展示百度十年深耕自动驾驶的重大进展,基于大模型带来技术阶跃、面向乘客安全全新定义的无人车和全球最大的无人车自动运营网络,百度已经做到自动驾驶比人类驾驶更安全。得益于此,更加安全舒适、绿色低碳的出行方式正从理想成为现实。百度集团副总裁、智能驾驶事业群组总裁王云鹏现场表示:“我们做无人车的初衷,是满足老百姓日益增长的、对美好出行的向往,人民群众的满意是我们前进的动力。因为安全、所以美好,我们欣喜地看到

在息壤中有不少用户不知道贝壳在哪里,怎么才能获得,有些玩家转了几个小时候都没有找到,下面小编就带来了百度息壤贝壳的获取方法,快来一起看看吧。百度息壤贝壳怎么获得1、首先我们需要来到社区,然后来到下图的这个位置。2、在这里选择目的地,选择进入188层。3、进入到188层后,在周围转悠会有这个提示,点击我知道了就行。4、贝壳的位置可能会有些难找,就在188电梯的后面,有个发光的小点就是贝壳。5、捡贝壳需要用VR手柄才能捡,点击贝壳就可以了。兑换方式1、首先点击页面右上方的“设置”图标,在设置中选择“

DeepSeek 是一款强大的智能搜索与分析工具,提供网页版和官网两种访问方式。网页版便捷高效,免安装即可使用;官网则提供全面产品信息、下载资源和支持服务。无论个人还是企业用户,都可以通过 DeepSeek 轻松获取和分析海量数据,提升工作效率、辅助决策和促进创新。

本站5月7日消息,5月6日,百度创始人、董事长兼首席执行官李彦宏带队在北京拜访中国石油天然气集团有限公司(以下简称“中国石油”),并与中国石油集团董事长、党组书记戴厚良举行会谈。双方就强化合作,推动能源行业与数字化智能化深度融合进行了深入交流。中国石油将加快推进数字中中国石油建设,加强与百度集团合作,推动能源行业与数字化智能化的深度融合,为保障国家能源安全作出更大贡献。李彦宏表示,大模型展现出的“智能涌现”和理解、生成、逻辑、记忆等核心能力,为前沿科技与油气业务结合打开了更加广阔的想象空间。一直

5月31日消息,据博主@i冰宇宙今日爆料,三星GalaxyS24系列手机国行版“即圈即搜”将支持谷歌搜索。具体上线时间,该博主并未透露。根据三星此前介绍,三星GalaxyS24系列实装了众多高阶AI能力,将输入、翻译、录音机、笔记、相机等实用功能AI化,为用户带来更方便、更高效的综合体验。与海外版不同的是,三星GalaxyS24系列的AI功能大多由国内厂商提供服务,例如百度等。此前报道,GalaxyAI深度集成百度文心大模型多项能力,可提供端侧赋能的通话、翻译功能,以及借助生成式AI带来的智能摘

本文介绍了六款流行的 AI 工具,包括抖音豆包、文心一格、腾讯智影、百度飞桨 EasyDL、百度 AI Studio 和讯飞星火认知大模型。这些工具涵盖不同的功能,如文本创作、图像生成、视频编辑和 AI 模型开发。选择合适的 AI 工具需要考虑功能需求、技术水平和成本预算等因素。这些工具为需要 AI 辅助的个人和企业提供了方便且高效的解决方案。

DeepSeek-R1赋能百度文库与网盘:深度思考与行动的完美融合短短一个月内,DeepSeek-R1已迅速融入众多平台。百度凭借大胆的战略布局,将DeepSeek作为第三方模型伙伴,整合进自身生态系统,这标志着其“大模型 搜索”生态战略的重大进展。百度搜索和文心智能体平台率先接入DeepSeek及文心大模型的深度搜索功能,为用户提供免费的AI搜索体验。同时,“百度一下,你就知道”的经典slogan回归,新版百度APP也整合了文心大模型和DeepSeek的能力,推出“AI搜索”、“全网信息提炼”
