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?
