Question

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

$("#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();
    }
});
});

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?

Answer 1

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…