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?
-
5With > 1K rep you should know better than to ask a question like this -- what have you tried?– Adam RackisCommented 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.– Felix KlingCommented 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 AmosCommented Feb 17, 2012 at 18:39
-
3This 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.– ElliotCommented Feb 17, 2012 at 18:43
-
5I 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...– stuartdotnetCommented Oct 2, 2012 at 1:17
|
Show 1 more comment
2 Answers
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/
-
Why is it no working if the elem has a multiple class but works if I replace the elem directly with my 2 class?– MIkeCommented 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.– MIkeCommented 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 theelem
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
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>
-
1The element should be hidden only if the click occurs outside of the element... Commented Feb 17, 2012 at 18:47
-
-