13

if I have a div I've shown thanks to a click event - what are some easy was to make it close if someone clicks anywhere outside the div, or hits the esc key?

Elliot
  • 13,580
  • 29
  • 82
  • 118
  • 5
    With > 1K rep you should know better than to ask a question like this -- what have you tried? – Adam Rackis Feb 17 '12 at 18:37
  • Bind an event listener to those events and hide the div. See [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) and [Which keycode for escape key with jQuery](http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery). – Felix Kling Feb 17 '12 at 18:38
  • I'm no JavaScript expert, but this should help: http://www.javascriptkit.com/jsref/eventkeyboardmouse.shtml. Use onKeyPress for esc. For the clicking, have a transparent div or something covering the entire page, with your div on top. This transparent object should have an onClick and that click will be the closing click. – Ryan Amos Feb 17 '12 at 18:39
  • 3
    This is a super basic question. I am new to javascript - but I was still aware the answer didn't need more detail in the question. As you can see, it has been answered. – Elliot Feb 17 '12 at 18:43
  • *"This is a super basic question."* Exactly, which is why it is expected that you put forth at least some effort. Did you even try to find the answer on your own by researching first, or did you just come here and hope someone would spoon feed the answer? –  Feb 17 '12 at 18:55
  • 5
    I had the same question, I put in some "effort" to research it, this question came up top of google, it was the answer I was looking for. Not sure what everyone's problem is... – Stuart Dobson Oct 02 '12 at 01:17

2 Answers2

54

Here you go...

$( document ).on( 'click', function ( e ) {
    if ( $( e.target ).closest( elem ).length === 0 ) {
        $( elem ).hide();
    }
});

$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
        $( elem ).hide();
    }
});

Live demo: http://jsfiddle.net/S5ftb/

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • Why is it no working if the elem has a multiple class but works if I replace the elem directly with my 2 class? – MIke Mar 05 '18 at 06:53
  • @MIke How do you assign `elem`? Check if it is indeed a reference to your element. – Šime Vidas Mar 05 '18 at 15:13
  • its working for the first element and works only for once. succeeding elements doesn't work at all. not sure why and what is the issue. – MIke Mar 05 '18 at 23:51
  • @MIke Probably because `elem` refers only to that first element. If you have multiple elements that can be shown (not at the same time, of course), you have to make sure that, whenever you show one of the elements, you update the `elem` reference so that it points to *that* element. – Šime Vidas Mar 06 '18 at 14:25
  • Here's a little more robust solution I created based on this answer. It also contains a Close button. The code is also commented for easier reference: http://jsfiddle.net/xd7fhkLg/17/ – Ricardo Zea Mar 21 '19 at 17:11
11

For those of you who prefer vanilla:

<div id="div">Click me dude</div>

<script>
    d = document.getElementById("div");
    d.addEventListener("click",     function(e){e.stopPropagation()},true);
    addEventListener("click",       function() {d.style.display="none"},false);
    addEventListener("keypress",    function(e){e.keyCode==27 &&(d.style.display="none")},false);
</script>
Jeffrey Sweeney
  • 5,986
  • 5
  • 24
  • 32