Question

I was making a light box gallery but this code doesn’t hide the lightbox div which was supposed to be hidden when I press the esc key.

$(document).keyup(function(e) {
    if(e.keyCode==27) {
        $("#lightbox").hide();
    }
});

I have my DOM elements like this:

<div id="lightbox">
    <div id="overlay">
        <div id="imageholder">
            <img name="lightboximage" src="images/demo/940x340.gif" height="600" width="700" align="left" />
            <div id="description">
                <h1><a href="url/cyberkiller.nishchal">Nishchal Gautam</a></h1>
                <p>Description about the image</p>
            </div>
        </div>
    </div>
</div>

I have placed the script below these elements, am I missing something?

Answer 1

Try using the keypress event instead of keyup..

$(document).on('keypress' , function(e) {
   var code = (e.keyCode ? e.keyCode : e.which);

   if(code ==27){
      $("#lightbox").hide();
   }
});