2010-08-26 69 views
2

我试图关闭一个灯箱,当按下转义键但弹出窗口未关闭时。关闭按ESC时的灯箱

$(document).keypress(function(e){ 

    if(e.keyCode==27 && popupStatus==1){ 

     disablePopup(); 
    } 
}); 

下面是完整的代码:

var popupStatus = 0; 
var buttonDivID = ""; 
var conDivID = ""; 

//determine which div is clicked 
function setDiv(div) { 
    if(div==1){ 
     conDivID = "#intro"; 
    } 
    if(div==2) { 
     conDivID = "#presentation"; 
    } 
} 

//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"); 

     $(conDivID).CenterIt(); 

     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(){ 

    $("#vid2").click(function(){ 
    //set the lightbox divs 
    setDiv(2); 
    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(); 
     } 
    }); 
}); 

另一种方法,这是点击X按钮正确关闭弹出。为什么不关闭它?

+1

您是否检查了您在按键处理程序中获得的键码? jQuery有'event.which',可以用跨浏览器来确定哪个键被按下:http://api.jquery.com/event.which/ – Pat 2010-08-26 19:23:03

回答

17

这工作:

$(document).ready(function(){ 
    $(document).bind('keydown', function(e) { 
     if (e.which == 27) { 
      alert('esc pressed'); 
     } 
    }); 
}); 
2

这是一个BUG:退出按钮不工作jquery.lightbox-0.5

解决方案: http://code.google.com/p/jquery-lightbox/issues/detail?id=27#c4

我不知道,如果这已被灯箱人员修复。我做了一点 调试,发现在 jquery.lightbox-0.5js的第339行上,对于Mozilla浏览器,在 行339上,escapeKey被设置为'undefined'。所以,我加入 以下代码块在线341重新设置退出键VAR为“27”:

// Fix because Escape Key wasn't being detected 
    if (escapeKey == undefined) { escapeKey = 27; } 

这应该是右侧的“//获取小写形式键” 以上评论,你可以在文件中快速搜索。

现在适用于我。

+0

其实问题的唯一相关答案“ESC时关闭灯箱被按下“。我不知道为什么问题的作者写了这么多的代码。 – 2012-04-17 06:39:27

2

只需使用的KEYUP代替按键,而不是的keyCode。 Chrome未使用按键返回任何关键代码,并且Firefox返回零。

$(document).keyup(function(e){ 

    if(e.which == 27 && popupStatus == 1){ 

     disablePopup(); 
    } 
});