2010-07-17 162 views
0

我有兩個div,一個是背景,另一個是vid的容器,位於前者的頂部。另一個div作爲一個按鈕,點擊後會觸發燈箱。這裏是我的代碼:jQuery燈箱問題

//0 means disabled; 1 means enabled; 

var popupStatus = 0; 
var buttonDivID = ""; 
var conDivID = ""; 

//determine which div is clicked 

function whichDiv(div) { 
    if(div==1){ 
     buttonDivID = "#vid"; 
     conDivID = "#popupContact"; 
    } 
} 

//loading popup with jQuery magic! 

function loadPopup(){ 

    //loads popup only if it is disabled 

if(popupStatus==0){ 

    $("#backgroundPopup").css({ 

     "opacity": "0.7" 

    }); 

    $("#backgroundPopup").fadeIn("slow"); 

    $(conDivID).fadeIn("slow"); 

    popupStatus = 1; 
} 
} 

//disabling popup with jQuery magic! 

function disablePopup(){ 

//disables popup only if it is enabled 

if(popupStatus==1){ 

    $("#backgroundPopup").fadeOut("slow"); 

    $(conDivID).fadeOut("slow"); 

    popupStatus = 0; 
    buttonDivID = ""; 
    conDivID = ""; 
} 
} 

//centering popup 

function centerPopup(){ 

//request data for centering 

var windowWidth = document.documentElement.clientWidth; 

var windowHeight = document.documentElement.clientHeight; 

var popupHeight = $(conDivID).height(); 

var popupWidth = $(conDivID).width(); 

//centering 

$(conDivID).css({ 

    "position": "absolute", 

    "top": windowHeight/2-popupHeight/2, 

    "left": windowWidth/2-popupWidth/2 
}); 

//only need force for IE6 

$("#backgroundPopup").css({ 

    "height": windowHeight 

}); 
} 

//CONTROLLING EVENTS IN jQuery 

$(document).ready(function(){ 

//LOADING POPUP 

//Click the button event! 

$(buttonDivID).click(function(){ 

    //centering with css 

    centerPopup(); 

    //load popup 

    loadPopup(); 
}); 


//CLOSING POPUP 

//Click the x event! 

$("#popupContactClose").click(function(){ 

    disablePopup(); 

}); 

//Press Escape event! 

$(document).keypress(function(e){ 

    if(e.keyCode==27 && popupStatus==1){ 

     disablePopup(); 
    } 
}); 
}); 

我應該提到我沒有創建這個代碼,我只是修改它以適合我的需要。這裏的問題是,當我點擊頁面上除按鈕div以外的任何地方時,燈箱的背景div彈出。當我關閉vid容器時,背景div仍然可見,這不是我想要的。你能告訴我我的代碼有什麼問題嗎?

回答

1

也許我錯過了一些東西,但它看起來像buttonDivID只在whichDiv函數中設置,它永遠不會被調用。我會從那裏開始...

+0

它在html頁面中被調用:

我是否必須在監聽器(whater中稱之爲)塊中調用它? – Joann 2010-07-17 13:06:50

+0

我剛解決了它。你是對的。剛剛添加的行(DIV)。我不知道這是如此微不足道。我想我對jQuery太新了。 :-) – Joann 2010-07-17 14:11:04