代码改变世界

进化版百度Popup.js弹出框|拖拽小框架发布，兼容IE6/7/8,Firefox,Chrome【附下载】

  Fred-Xu  阅读(5581)  评论(28)  编辑  收藏  举报

　　百度空间的弹出窗口和拖拽效果(也就是popup.js),代码精简，效果也很好，我们可以在很多大型网站上见到这种效果，在我的项目中也使用了该js。

　　原有百度的Popup.js在有

?
1
<!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行：

?
1
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。

?
1
2
3
4
5
6
7
8
9
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";即可。　

 

　　令附上获取页面高度在不同浏览器之间的差异参考资料：

　　clientHeight：在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度；

　　scrollHeight：在IE下，scrollHeight 是页面实际内容的高度，可以小于clientHeight；在FF下，scrollHeight 是网页内容高度，不过最小值是clientHeight。

/*******************************************************/

拓展方法：

1.弹出确认框回调执行服务器端方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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)。

完整代码：

?
1
2
<asp:Button ID="btnDel" runat="server" Text="删除" OnClick="btnDel_Click"
    OnClientClick="return ShowConfirm(' ','是否确定删除？',this)" />

2.在iframe中使用popup.js

　　我们在一个页面中内嵌了一个iframe，想让iframe中弹出的对话框或者确认框在父页面中弹出来，实现遮罩层全屏而不是只是在iframe页面中全屏，然后确认后执行回调操作iframe，可以是执行iframe中的服务器端方法。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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方法：

?
1
2
3
4
5
//删除
  function subDel(obj)
     {
        return parent.parentDel(obj);
     }

Button按钮控件注册OnClientClick事件：

?
1
<asp:Button ID="btnDel" runat="server"  OnClick="btnDel_Click" ToolTip="删除" CssClass="deleteBtn" OnClientClick="return subDel(this);return false;"  />

父页面定义js方法：

?
1
2
3
4
function parentDel(obj)
        {
            return ShowConfirmIFrame('删除','是否确定删除？',obj);
        }

popup.js进化版下载[点击下载]

编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
历史上的今天：
2009-04-13 使用IIS作为宿主的WCF服务出现HTTP Error 404.3 - Not Found错误的解决办法
点击右上角即可分享
微信分享提示
AI IDE Trae