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仍然可见,这不是我想要的。你能告诉我我的代码有什么问题吗?
它在html页面中被调用:
我是否必须在监听器(whater中称之为)块中调用它? – Joann 2010-07-17 13:06:50我刚解决了它。你是对的。刚刚添加的行(DIV)。我不知道这是如此微不足道。我想我对jQuery太新了。 :-) – Joann 2010-07-17 14:11:04