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();
    }
});