百度Popup.js弹出框进化版：解决IE6-8与FF/Chrome兼容性及服务器回调

Popup.js进化版功能概述

此前本站曾发布过类似代码，虽然基本功能可用，但此版本主要增加了执行服务器端方法回调的功能，这对于ASP.NET或Ajax开发者而言是一项极具价值的改进。

首先展示效果如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

解决FF/Chrome遮罩层兼容性问题

在存在该DOCTYPE声明的页面中，IE6、IE7和IE8下的遮罩层可以正常全屏显示，但在Firefox和Chrome浏览器中却无法实现全屏遮罩。

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的样式仅简单设置为height:100%，这导致在带有DOCTYPE声明的页面中，Firefox和Chrome浏览器无法兼容全屏显示。

目前网上流传着由“luocheng”发布的“完美版”popup.js，经下载测试发现并未完全兼容Firefox和Chrome，仍存在遮罩层无法全屏的Bug。通过阅读源码发现错误所在：该版本增加了一个getValue方法，在switch语句的case "clientHeight"分支中竟然出现了两个重复项，删除其中一个后继续测试，依然无法兼容Firefox和Chrome。进一步排查代码发现，新增的setBackgroundSize方法中，G('dialogBoxBG').style.height = getValueHeight仅将整数值赋给遮罩层的高度，这不符合Web标准，从而导致Firefox和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";即可。

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

clientHeight：在IE和Firefox浏览器下，该属性无明显差异，均指浏览器的可视区域高度，即除去工具栏和状态栏后的页面展示空间高度；

scrollHeight：在IE浏览器下，scrollHeight表示页面实际内容的高度，其值可能小于clientHeight；而在Firefox浏览器下，scrollHeight表示网页内容高度，但其最小值为clientHeight。

服务器端回调与iframe应用示例

拓展方法：

 
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)" />

若页面中内嵌了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();
} 

使用方法如下：

 
//删除
function subDel(obj)
{ 
return parent.parentDel(obj);
} 

<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进化版与普通修正版下载，原版也修正了前述未完全兼容Firefox和Chrome的问题。