雲棲社區之前發布過這樣的代碼，其實問題不大，但這裡的版本主要是增加一些功能，回調執行伺服器端的方法，對於asp.net開發或ajax開發都是非常有價值的改進。
先看下效果圖：
![]()
原有百度的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的問題。
