15

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?

6
  • 5
    With > 1K rep you should know better than to ask a question like this -- what have you tried? Commented Feb 17, 2012 at 18:37
  • Bind an event listener to those events and hide the div. See How to detect a click outside an element? and Which keycode for escape key with jQuery. Commented Feb 17, 2012 at 18:38
  • I'm no JavaScript expert, but this should help: 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
    Commented Feb 17, 2012 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
    Commented Feb 17, 2012 at 18:43
  • 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... Commented Oct 2, 2012 at 1:17

2 Answers 2

55

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/

5
  • 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
    Commented Mar 5, 2018 at 6:53
  • @MIke How do you assign elem? Check if it is indeed a reference to your element. Commented Mar 5, 2018 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
    Commented Mar 5, 2018 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. Commented Mar 6, 2018 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: jsfiddle.net/xd7fhkLg/17 Commented Mar 21, 2019 at 17:11
10

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>
3
  • 1
    The element should be hidden only if the click occurs outside of the element... Commented Feb 17, 2012 at 18:47
  • Yikes, good catch; I'll revise. Commented Feb 17, 2012 at 19:28
  • Thanks for the non-jquery solution!
    – Philipp
    Commented Jun 4, 2017 at 11:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.