首页 web前端 js教程 百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome_javascript技巧

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

May 16, 2016 pm 06:29 PM
弹出框 百度

脚本之家之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进。
先看下效果图:
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome_javascript技巧

原有百度的Popup.js在有

复制代码 代码如下:

声明的网页下存在兼容性问题,即在IE6,7,8下,遮罩层是可以全屏,但在Firefox和Chrome下无法全屏遮罩。
  造成遮罩层在FF和Chrome下无法全屏的问题在267行:
复制代码 代码如下:
var C = '
';

遮罩层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的问题。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

百度怎么跳过安全警告 百度怎么跳过安全警告 Feb 23, 2024 pm 10:34 PM

百度怎么跳过安全警告?百度APP中是有多样化的安全防护服务,但是多数的小伙伴不知道如何跳过安全警告,接下来就是小编为用户带来的百度跳过安全警告方法图文教程,感兴趣的用户快来一起看看吧!百度怎么跳过安全警告1、首先打开百度APP,进入主页面右下角【我的】点击,我的专区点击右上角【设置】;2、然后在设置功能页面,选择其中的【上网安全】;3、最后在上网安全界面,点击【网址安全】即可跳过完全警告。

百度高级搜索怎么用 百度高级搜索怎么用 Feb 22, 2024 am 11:09 AM

百度高级搜索怎么用百度搜索引擎是目前中国最常用的搜索引擎之一,它提供了丰富的搜索功能,其中之一就是高级搜索。高级搜索可以帮助用户更精确地搜索到所需的信息,提高搜索效率。那么,百度高级搜索怎么使用呢?第一步,打开百度搜索引擎首页。首先,我们需要打开百度的官方网站,即www.baidu.com。这是百度搜索的入口。第二步,点击高级搜索按钮。在百度搜索框的右侧,有

2 个月不见,人形机器人 Walker S 会叠衣服了 2 个月不见,人形机器人 Walker S 会叠衣服了 Apr 03, 2024 am 08:01 AM

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

deepseek网页版入口 deepseek官网入口 deepseek网页版入口 deepseek官网入口 Feb 19, 2025 pm 04:54 PM

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

百度无痕模式怎么解除 百度无痕模式怎么解除 Feb 29, 2024 pm 03:40 PM

百度无痕模式是一项隐私保护功能,它允许用户在使用百度搜索或其他服务时,不留任何个人信息或浏览记录。对于一些用户来说,他们可能希望解除无痕模式,以便能够保留自己的搜索历史或浏览记录。那么百度无痕模式怎么解除呢?还不清楚的小伙伴也别着急,接下来小编为大家带来了无痕浏览模式解除方法,大家可以按照以下步骤进行操作。百度无痕模式怎么解除1、点击桌面的【百度】图标,打开百度APP。2、随便搜索一个东西,进入搜索结果页。3、点击页面底部的【≡】。4、在弹出的窗口中找到“多窗口”,点击进入。5、打开/关闭“无痕

百度息壤贝壳获取方法介绍 百度息壤贝壳获取方法介绍 Mar 28, 2024 am 09:11 AM

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

百度Apollo重磅发布全球首个支持L4级自动驾驶的大模型Apollo ADFM 百度Apollo重磅发布全球首个支持L4级自动驾驶的大模型Apollo ADFM Jun 04, 2024 pm 08:01 PM

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

ai工具推荐 ai工具推荐 Nov 29, 2024 am 11:08 AM

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

See all articles