jQuery: Hide popup if click detected elsewhere

Question

I'm trying to hide a div if the user clicks anywhere BUT the popup OR its children. This is the code I have so far:

$("body").click(function(){
    var $target = $(event.target);
    if(!$target.is(".popup") || !$target.is(".popup").children()){
        $("body").find(".popup").fadeOut().removeClass('active');
    }
});

This works for the .popup div, but if any of its children are clicked, it hides it anyway.

score 89 · Accepted Answer · answered Feb 24 '10 at 21:51

89

You really could simplify this a bit I think:

// If an event gets to the body
$("body").click(function(){
  $(".popup").fadeOut().removeClass("active");
});

// Prevent events from getting pass .popup
$(".popup").click(function(e){
  e.stopPropagation();
});

Clicking on the popup, or any of its children will cause propagation to stop before it reaches the body.

Demo of stopping event-propagation: http://jsbin.com/ofeso3/edit

answered Feb 24 '10 at 21:51

Sampson

265,109
74
539
565

3

One minor suggestion is writing $(".popup:visible").fadeOut().removeClass("active"); - I've had problems where the thing reappears just to fade out again. – ehdv Feb 25 '10 at 19:00
This seems like a great solution, however, I'm having problems when there are things that need to occur within the popup based on the click event. Specifically, I have a Rails app and am using a :remote => true on a form within the popup window. In this case the AJAX functionality breaks when e.stopPropagation() is used. I had created http://stackoverflow.com/questions/5904602/jquerys-event-stoppropagation-causing-problems-with-rails-remote-true before finding this question. Any way around this? – robertwbradford May 10 '11 at 15:48
... I meant to say "using a :method => :delete, :remote => true on a 'destroy' link_to within the popup window..." – robertwbradford May 10 '11 at 15:56
4

I think the first line should be $('html'), because otherwise the user can click an area within the browser that's not part of body. This can happen if body doesn't fill the whole browser window. – mlissner Jul 04 '11 at 05:18
There are simpler solutions that don't stop event propagation. Stopping event propagation can lead to unintended consequences. More here - https://css-tricks.com/dangers-stopping-event-propagation/ – ctorx Mar 26 '15 at 04:59
This didn't work for my case. I find first answer here more general and better: http://stackoverflow.com/questions/28558865/popup-window-close-on-click-outside-not-inside-jquery – besimple Mar 23 '16 at 15:27
I have just found a serious issue with tricks like this, so be warned: It will break a lot of form elements. – NoobishPro Jan 18 '17 at 19:06

score 8 · Answer 2 · answered Mar 29 '13 at 10:31

8

I am using a very simple code for this as :-

$(document).click(function(e){

   if($(e.target).closest('#popupdivID').length != 0) return false;
   $('#popupdivID').hide();
});

this is also useful for dropdown menu. if you have click on dropdown menu and viewing the list and then click on elsewhere in the document then that dropdown should be closed. I have used same code for that also.

Thanks!!

answered Mar 29 '13 at 10:31

Vishnu Choudhary

421
5
6

best solution,other will stop all click binds inside the popup – baaroz Apr 07 '14 at 17:38

score 4 · Answer 3 · answered Mar 18 '13 at 23:32

Here's a potential solution for certain situations. The popup must have tabindex set for this to work and cannot have any "focusable" elements inside.

$('a').click(function() {
    $('.popup').show().focus();
});
$('.popup').blur(function() {
    $(this).hide();
});

http://jsfiddle.net/d6zw3/

score 4 · Answer 4 · answered Apr 07 '14 at 10:36

4

Do this:

$(document).click(function (e) {
    // show_alerts is the class of the link to display the popup
    if (!$(e.target).parents().andSelf().is('.show_alerts')) {
        // hide your popup
    }
});

example: http://jsfiddle.net/Acf3F/

answered Apr 07 '14 at 10:36

Benjamin Crouzier

40,265
44
171
236

ghoppe · Answer 5 · 2010-02-24T22:07:32.467

3

Brush up on your boolean logic! :)

if(!$target.is(".popup") && !$target.parents().is(".popup"))

edited Feb 24 '10 at 22:07

answered Feb 24 '10 at 21:48

ghoppe

21,452
3
30
21

I would have expected `$.fn.is` to be returning boolean values. How does it pull off this magic? – Matchu Feb 24 '10 at 21:50

score 1 · Answer 6 · answered Apr 27 '12 at 17:27

We are using this to show a popup on click and then hide it once you click the same button again or click outside.

function togglePopup(){
  var selector = '#popup',
    $popup = $(selector),
    callback = function(e) {
      if (!$(e.target).parents().andSelf().is(selector)) {
        $popup.hide();
        $(document).off('click', callback);
      }
    };

  $popup.toggle();
  if ($popup.is(':visible')) {
    $(document).on('click', callback);
  }
  return false;
}

score 1 · Answer 7 · edited Jul 09 '12 at 11:04

1

$("body").click(function(event ){
            var $target = $(event.target);
            if(!$target.parents().is(".popup") && !$target.is(".popup")){
                $("body").find(".popup").hide();
            }
        });

this is the solution for me

edited Jul 09 '12 at 11:04

Tim Head

128
2
5

answered May 04 '12 at 13:10

Stane

11
1

score 1 · Answer 8 · edited Nov 11 '12 at 18:37

1

As of jQuery 1.7 there is the on() handler, the following works for me, assuming a visible popup contains the class '.activePopup' :

$('body').on('click', ":not(.activePopup)", function(e){
  e.stopPropagation();
  //do your hiding stuff
});

edited Nov 11 '12 at 18:37

Petter Nordlander

22,053
5
50
84

answered Oct 01 '12 at 11:18

tapmonkey

141
2
9

score 1 · Answer 9 · answered Oct 04 '13 at 05:43

Here is the code snippet which may help for a html structure

<script>
jQuery(document).click(function() {
        jQuery(".main-div-class .content").css("display","none");
    });

    jQuery(".main-div-class .content").click(function (e) {
        e.stopPropagation();
        //do redirect or any other action on the content
    });     
    jQuery(".main-div-class h4").click(function(e) {
        e.stopPropagation();
        jQuery(this).parent().find(".content").show();
    });
</script>
<div class="main-div-class">
<h4>click here</h4>
<div class='content'>to show content here like this "<a href="http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere#new-answer">Click</a>" or any other type of content</div>
</div>

We may also add this code in jQuery(document).ready(function(){}); — Abdul Rehman, Oct 04 '13 at 06:01

score 1 · Answer 10 · answered Oct 04 '13 at 06:03

so updated code may be like this

<script type="text/javascript">
jQuery(document).ready(function(e) {
jQuery(document).click(function() {
        jQuery(".main-div-class .content").css("display","none");
    });

    jQuery(".main-div-class .content").click(function (e) {
        e.stopPropagation();
        //do redirect or any other action on the content
    });     
    jQuery(".main-div-class h4").click(function(e) {
        e.stopPropagation();
        jQuery(this).parent().find(".content").show();
    });
});
</script>
<div class="main-div-class">
<h4>click here</h4>
<div class='content'>to show content here like this "<a href="http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere#new-answer">Click</a>" or any other type of content</div>
</div>

Craig Poole · Answer 11 · 2014-07-01T08:28:09.107

I had issues with all of the solutions here, so after some frustration; I approached the problem from a slightly different direction.

I specifically didn't like attaching click events to the body or document and event.target wasn't reliable enough. I also didn't want to use stopPropagation() as I didn't want to interfere with other events.

Here's how I solved it, hope it helps:

Markup

<div id="ModalBG"></div>
<div id="Modal">Content Here</div>

JavaScript

function showModal(){ $("#Modal, #ModalBG").show(); }

$("#ModalBG").click(function () { $("#Modal, #ModalBG").hide() });

CSS

#Modal{
    z-index: 99;
}


#ModalBG{
    opacity: 0;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 98;
    display: none;
}

score 0 · Answer 12 · answered Oct 15 '19 at 14:15

I did something like the following. Hope it helps someone

$('body').click(function(e) {
    $('className').click(function(){
         e.stopPropagation();
         $(this).data('clicked', true);
    })
if(!$('.className').data('clicked')){
    // do sth
 } else {
    // do sth else
 }
$('.className').data('clicked', false);

jQuery: Hide popup if click detected elsewhere

12 Answers12

Linked