Question

我有两个div，一个是背景，另一个是vid的容器，它位于前者之上。另一个div用作按钮，单击该按钮可触发灯箱。这是我的代码：

//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仍然可见，这不是我想要的。你能告诉我我的代码有什么问题吗？

Answer 1

也许我错过了一些东西，但看起来buttonDivID只是在whichDiv函数中设置，它永远不会被调用。我会从那里开始......

jQuery灯箱问题

1 个答案: