2010-07-17 112 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