jQuery lightbox problem
I got two divs, one is a background and the other is the container for a vid which is on top of the former. Another div serves as a button that when clicked, it triggers the lightbox. Here's my code:
//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
$("#background开发者_Go百科Popup").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();
}
});
});
I should mention that I didn't create this code, I just modified it to fit my needs. The problem here is that when I click anywhere on the page except the button div, the background div of the lightbox pops up. And when I close the vid container, the background div remains visible which is not what I want. Could you pls tell me what's wrong with my code?
Maybe I'm missing something, but it looks like the buttonDivID
is only being set in the whichDiv
function, which is never being called. I would start there...
精彩评论