武林網(wǎng)之前發(fā)布過這樣的代碼，其實問題不大，但這里的版本主要是增加一些功能，回調(diào)執(zhí)行服務(wù)器端的方法，對于asp.net開發(fā)或ajax開發(fā)都是非常有價值的改進。
先看下效果圖：
原有百度的Popup.js在有
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
聲明的網(wǎng)頁下存在兼容性問題，即在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只是單純的設(shè)置為height:100%，所以在有<!DOCTYPE...>聲明下的頁面無法兼容FF和Chrome。
然而目前網(wǎng)上有一個“l(fā)uocheng”的“完美版”popup.js，下載下來試用了下，結(jié)果并沒有完全兼容FF和Chrome，還是存在遮罩層無法全屏的bug，讀了一下源代碼，找到了錯誤所在：luocheng的版本中增加了一個getValue方法，switch語句中的case "clientHeight":竟然有兩個！刪掉一個以后繼續(xù)測試，還是無法兼容FF和Chrome，繼續(xù)讀代碼排錯，增加的setBackgroundSize方法中G('dialogBoxBG').style.height = getValueHeight;只是復(fù)制給遮罩層dialogBoxBG的height=整數(shù)值，這個是不遵循web標(biāo)準(zhǔn)的，所以在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";即可。
所以大家以后在開發(fā)過程中，注意對于寬度與高度最好加上'px';這樣的單位。
令附上獲取頁面高度在不同瀏覽器之間的差異參考資料：
clientHeight：在IE和FF下，該屬性沒什么差別，都是指瀏覽器的可視區(qū)域，即除去瀏覽器的那些工具欄狀態(tài)欄剩下的頁面展示空間的高度；
scrollHeight：在IE下，scrollHeight 是頁面實際內(nèi)容的高度，可以小于clientHeight；在FF下，scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是clientHeight。
/*******************************************************/
拓展方法：
1.彈出確認(rèn)框回調(diào)執(zhí)行服務(wù)器端方法
function ShowConfirm(title, content, target) //顯示確認(rèn)對話框
{
var pop = new Popup({
contentType: 3,
isReloadOnClose: false,
width: 350,
height: 110
});
pop.setContent("title", title);
pop.setContent("confirmCon", content);
pop.setContent("callBack", ShowCallBackServer); //回調(diào)函數(shù)
pop.setContent("parameter", {
id: "divCall",
str: target,
obj: pop
});
pop.build();
pop.show();
popp = pop;
return false;
}
//執(zhí)行服務(wù)器端方法，即進行__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控件上注冊O(shè)nClientClick為return ShowConfirm(' ','是否確定刪除？',this)。
完整代碼：
<asp:Button ID="btnDel" runat="server" Text="刪除" OnClick="btnDel_Click" OnClientClick="return ShowConfirm(' ','是否確定刪除？',this)" />
2.在iframe中使用popup.js
我們在一個頁面中內(nèi)嵌了一個iframe，想讓iframe中彈出的對話框或者確認(rèn)框在父頁面中彈出來，實現(xiàn)遮罩層全屏而不是只是在iframe頁面中全屏，然后確認(rèn)后執(zhí)行回調(diào)操作iframe，可以是執(zhí)行iframe中的服務(wù)器端方法。
function ShowConfirmIFrame(title, content, target) //顯示確認(rèn)對話框
{
var pop = new Popup({
contentType: 3,
isReloadOnClose: false,
width: 350,
height: 110
});
pop.setContent("title", title);
pop.setContent("confirmCon", content);
pop.setContent("callBack", ShowIFrame); //回調(diào)函數(shù)
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按鈕控件注冊O(shè)nClientClick事件：
<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的問題。
