58429

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

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

Answer1:

This works:

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

Answer2:

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.

Answer3:

Just use <strong>keyup</strong> instead of <strong>keypress</strong> and <strong>which</strong> instead of <strong>keyCode</strong>. 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(); } });

Recommend

  • How many units will fit in the window and push that value to an array
  • Center multiline text vertically in a window, pure winapi and c++
  • How can I iterate over a quadruple linked 2-dimensional grid of data as if it were a 2-dimensional a
  • What are the areas covered by Flexbox which are difficult or impossible to achieve with Grid?
  • Setting an attribute value in XML file using ElementTree
  • Fit height of div to screen height and fix footer to bottom
  • Resize Dialog/WebBrowser to webpage width
  • How to center text along Kinetic.TextPath with kineticjs
  • How to set a Popup to be always visible on the top in GWT
  • how to convert JSONString to Javascript Object
  • Index 1 is either negative or above rows count
  • Unable to resolve dependency for ':app@debug/compileClasspath': Could not resolve com.goog
  • UITextField TapGesture doesn't respond on iOS 7.1
  • How do I configure our MySQL ReplicationDriver for our JBoss 7 data source?
  • How to change slowly background attributes in jquery?
  • how to check smtp server is working or not using php
  • format JSON value with a php function and print result inside a div#id
  • Android fade in not working
  • DriveApp conversion from DocX to PDF fails (google apps script)
  • How do i install the cakephp forum plugin by Miles J?
  • Timer is not working in separate class in C#
  • Delphi TCollection - Possible to prevent changing items in run-time?
  • YQL finance gets null in results
  • How to make a UserDetailsManager available as a bean
  • How to fallback to entirely different index page if user has javascript disable?
  • How to get google-services.json from Developer console?
  • How to check disabled jobs with Jenkins server?
  • How to protect an asp:textbox from user input?
  • div fade-in when window is scrolled a certain distance from the top
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to redirect a user to a different server and include HTTP basic authentication credentials?
  • Menu Color Fade on Hover with Jquery
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Symfony2: How to get request parameter
  • log4net write single file for each call to log.info
  • Getting error when using KSoap library to consume .NET web services
  • embed rChart in Markdown
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app