DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 百度Popup.js彈出框進化版 拖拽小框架發布 兼容IE6/7/8,Firefox,Chrome
百度Popup.js彈出框進化版 拖拽小框架發布 兼容IE6/7/8,Firefox,Chrome
編輯：關於JavaScript
之前發布過這樣的代碼，其實問題不大，但這裡的版本主要是增加一些功能，回調執行服務器端的方法，對於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的問題。
先看下效果圖：
原有百度的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的問題。
小編推薦
熱門推薦