百度Popup.js彈出框進(jìn)化版 拖拽小框架發(fā)布 兼容IE6/7/8,Firefox,Chrome
更新時(shí)間：2010年04月13日 19:20:18 作者：
百度空間的彈出窗口和拖拽效果(也就是popup.js),代碼精簡，效果也很好，我們可以在很多大型網(wǎng)站上見到這種效果，在我的項(xiàng)目中也使用了該js。
腳本之家之前發(fā)布過這樣的代碼，其實(shí)問題不大，但這里的版本主要是增加一些功能，回調(diào)執(zhí)行服務(wù)器端的方法，對于asp.net開發(fā)或ajax開發(fā)都是非常有價(jià)值的改進(jìn)。
先看下效果圖：
原有百度的Popup.js在有
聲明的網(wǎng)頁下存在兼容性問題，即在IE6,7,8下，遮罩層是可以全屏，但在Firefox和Chrome下無法全屏遮罩。
造成遮罩層在FF和Chrome下無法全屏的問題在267行：
遮罩層dialogBoxBG 的style只是單純的設(shè)置為height:100%，所以在有<!DOCTYPE...>聲明下的頁面無法兼容FF和Chrome。
然而目前網(wǎng)上有一個(gè)“l(fā)uocheng”的“完美版”popup.js，下載下來試用了下，結(jié)果并沒有完全兼容FF和Chrome，還是存在遮罩層無法全屏的bug，讀了一下源代碼，找到了錯(cuò)誤所在：luocheng的版本中增加了一個(gè)getValue方法，switch語句中的case "clientHeight":竟然有兩個(gè)！刪掉一個(gè)以后繼續(xù)測試，還是無法兼容FF和Chrome，繼續(xù)讀代碼排錯(cuò)，增加的setBackgroundSize方法中G('dialogBoxBG').style.height = getValueHeight;只是復(fù)制給遮罩層dialogBoxBG的height=整數(shù)值，這個(gè)是不遵循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 是頁面實(shí)際內(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ù)器端方法，即進(jìn)行__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;
}
使用方法：
在一個(gè)有OnClick="btnTest_Click" 的Button控件上注冊O(shè)nClientClick為return ShowConfirm(' ','是否確定刪除？',this)。
完整代碼：
2.在iframe中使用popup.js
我們在一個(gè)頁面中內(nèi)嵌了一個(gè)iframe，想讓iframe中彈出的對話框或者確認(rèn)框在父頁面中彈出來，實(shí)現(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事件：
父頁面定義js方法：
function parentDel(obj)
{
return ShowConfirmIFrame('刪除','是否確定刪除？',obj);
}
popup.js進(jìn)化版與普通修正版下載 原版也修正了上面所說的并沒有完全兼容FF和Chrome的問題。
先看下效果圖：
原有百度的Popup.js在有
復(fù)制代碼 代碼如下:
<!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行：
復(fù)制代碼 代碼如下:
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)上有一個(gè)“l(fā)uocheng”的“完美版”popup.js，下載下來試用了下，結(jié)果并沒有完全兼容FF和Chrome，還是存在遮罩層無法全屏的bug，讀了一下源代碼，找到了錯(cuò)誤所在：luocheng的版本中增加了一個(gè)getValue方法，switch語句中的case "clientHeight":竟然有兩個(gè)！刪掉一個(gè)以后繼續(xù)測試，還是無法兼容FF和Chrome，繼續(xù)讀代碼排錯(cuò)，增加的setBackgroundSize方法中G('dialogBoxBG').style.height = getValueHeight;只是復(fù)制給遮罩層dialogBoxBG的height=整數(shù)值，這個(gè)是不遵循web標(biāo)準(zhǔn)的，所以在FF和Chrome下存在bug。
復(fù)制代碼 代碼如下:
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 是頁面實(shí)際內(nèi)容的高度，可以小于clientHeight；在FF下，scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是clientHeight。
/*******************************************************/
拓展方法：
1.彈出確認(rèn)框回調(diào)執(zhí)行服務(wù)器端方法
復(fù)制代碼 代碼如下:
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ù)器端方法，即進(jìn)行__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;
}
使用方法：
在一個(gè)有OnClick="btnTest_Click" 的Button控件上注冊O(shè)nClientClick為return ShowConfirm(' ','是否確定刪除？',this)。
完整代碼：
復(fù)制代碼 代碼如下:
<asp:Button ID="btnDel" runat="server" Text="刪除" OnClick="btnDel_Click" OnClientClick="return ShowConfirm(' ','是否確定刪除？',this)" />
2.在iframe中使用popup.js
我們在一個(gè)頁面中內(nèi)嵌了一個(gè)iframe，想讓iframe中彈出的對話框或者確認(rèn)框在父頁面中彈出來，實(shí)現(xiàn)遮罩層全屏而不是只是在iframe頁面中全屏，然后確認(rèn)后執(zhí)行回調(diào)操作iframe，可以是執(zhí)行iframe中的服務(wù)器端方法。
復(fù)制代碼 代碼如下:
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方法：
復(fù)制代碼 代碼如下:
//刪除
function subDel(obj)
{
return parent.parentDel(obj);
}
Button按鈕控件注冊O(shè)nClientClick事件：
復(fù)制代碼 代碼如下:
<asp:Button ID="btnDel" runat="server" OnClick="btnDel_Click" ToolTip="刪除" CssClass="deleteBtn" OnClientClick="return subDel(this);return false;" />
父頁面定義js方法：
復(fù)制代碼 代碼如下:
function parentDel(obj)
{
return ShowConfirmIFrame('刪除','是否確定刪除？',obj);
}
popup.js進(jìn)化版與普通修正版下載 原版也修正了上面所說的并沒有完全兼容FF和Chrome的問題。
您可能感興趣的文章:
- 原生JS實(shí)現(xiàn)可拖拽登錄框
- Javascript實(shí)現(xiàn)登錄框拖拽效果
- js實(shí)現(xiàn)登錄框鼠標(biāo)拖拽效果
- js實(shí)現(xiàn)百度登錄框鼠標(biāo)拖拽效果
- javascript 網(wǎng)頁編輯框及拖拽圖片的問題
- js實(shí)現(xiàn)彈出框的拖拽效果實(shí)例代碼詳解
- 使用純JS實(shí)現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)
- JavaScript實(shí)現(xiàn)模態(tài)框拖拽效果
- HTML+CSS+JavaScript實(shí)現(xiàn)可拖拽模態(tài)框
- javascript實(shí)現(xiàn)登錄框拖拽
相關(guān)文章
如何實(shí)現(xiàn)JavaScript動(dòng)態(tài)加載CSS和JS文件
這篇文章主要為大家詳細(xì)介紹了JavaScript動(dòng)態(tài)加載CSS和JS文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-10-10
本文主要介紹了Typescript實(shí)現(xiàn)棧的方法示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
js通過googleAIP翻譯PHP系統(tǒng)的語言配置的實(shí)現(xiàn)代碼
一同事弄了個(gè)系統(tǒng)是php寫的，雖然是多語言但沒中文！他打算手動(dòng)翻譯2000多個(gè)語言配置，真是佩服，知道后想了想，應(yīng)該有好的法辦2011-10-10
JavaScript數(shù)據(jù)類型的轉(zhuǎn)換詳解
JavaScript是一種動(dòng)態(tài)類型語言，變量沒有類型限制，可以隨時(shí)賦予任意值。本文就來和大家聊聊JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換，感興趣的小伙伴可以了解一下2022-12-12
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)放大鏡特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要是對JS與C#編碼解碼進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12![js之完全兼容ie與firefox的拖動(dòng)層代碼[測試好用]](http://img.jbzj.com/images/xgimg/bcimg6.png)
js之完全兼容ie與firefox的拖動(dòng)層代碼[測試好用]
經(jīng)測試，這個(gè)拖到效果不錯(cuò)，多瀏覽器支持。方便做網(wǎng)站的朋友使用2008-10-10
JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
JavaScript開發(fā)中需要搞懂的字符編碼總結(jié)
字符集就是字符的集合，字符編碼則代表字符集的實(shí)際編碼規(guī)則，是用于計(jì)算機(jī)解析字符的。本文為大家整理了JavaScript開發(fā)中需要搞懂的字符編碼，希望對大家有所幫助2023-02-02
前后端分離開發(fā)模式中,無論前后端都有可能區(qū)分不同的環(huán)境配置,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序多環(huán)境配置以及使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05