Close lightbox when ESC is pressed

I am trying to close a lightbox when escape is pressed but the popup does not close.

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

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

        disablePopup();
    }
});

Here's the full code:

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

//determine which div is clicke开发者_Go百科d
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();
        }
    });
});

The other method, which is clicking the x button closes the popup correctly. Why doesn't this close it?

This works:

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

It's a bug: escape button doesn't work at jquery.lightbox-0.5

Solution: http://code.google.com/p/jquery-lightbox/issues/detail?id=27#c4

I'm not sure if this has been fixed by the lightbox folks. I did a little bit of debugging and found out that on line 339 of jquery.lightbox-0.5js, the escapeKey was being set to 'undefined' on line 339 for Mozilla browsers. So, I added the following block of code at line 341 to re-set the escapeKey var to '27':

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

That should be right above the '//Get the key in lower case form' comment, which you can just do a quick search in the file for.

Works for me now.

Just use keyup instead of keypress and which instead of keyCode. Chrome didn't return any key code for Escape and Firefox returns zero when you use keypress.

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

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

        disablePopup();
    }
});