Hide pop up clicking anywhere

Question

I need to hide pop up clicking anywhere in page, not only when clicking again in "My team"

<div class="col-lg-3 mb-0" style="display: flex;align-items: center;">
                <div class="popup" onclick="myFunction()"><h6>My team</h6>
                    <span class="popuptext" id="myPopup">My team members:<br>AAA<br>BBB<br>CCC</span>
                </div>
        </div>
    </div>
        <ol class="breadcrumb"></ol>

        <script>
            // When the user clicks on <div>, open the popup
            function myFunction() {
            var popup = document.getElementById("myPopup");
            popup.classList.toggle("show");
            }
        </script>

depends if the popup is interactive, in other words if there are things to click inside the popup. — Manuel Otto, Nov 01 '17 at 22:07
Uhmmm how about this one with 1518 upvotes: https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element?rq=1 — Mr. Hugo, Nov 01 '17 at 22:22
Possible duplicate of [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — Mr. Hugo, Nov 01 '17 at 22:22
Do you truly mean any where? Meaning the next click, regardless of where, should close the popup? — Taplar, Nov 01 '17 at 22:30
Atually i've checked 1518 votes post and other ones, but not working. Yes Taplar — Edwin Bossman, Nov 01 '17 at 22:35

score 1 · Answer 1 · edited Nov 01 '17 at 22:14

1

$(document).on('click', function(e) {

   $clicked = $(e.target);

   if(!$clicked.is('.popup') && $('.popup').has(e.target).length==0) {
      $('.popup').hide();
   }

});

edited Nov 01 '17 at 22:14

Manuel Otto

6,410
1
18
25

answered Nov 01 '17 at 22:12

Matheus Dal'Pizzol

5,735
3
19
29

Pay attention: this code handles elements with the "popup" class. The element with the id "myPopup" does not have this class. Fine tune your HTML or your JavaScript to use the right selectors. The code I posted simply shows the general idea. – Matheus Dal'Pizzol Nov 01 '17 at 22:18

score 1 · Accepted Answer · answered Nov 01 '17 at 23:01

Please check this code is working. Thanks.

$('.popup').on('click', function(e) {
  if ($('#myPopup').css('display') == 'none')
    $('#myPopup').show();
  else
    $('#myPopup').hide();
});
$(document).on('click', function(e) {
  $clicked = $(e.target);
  if(!$clicked.is('.popup') && $('.popup').has(e.target).length==0) {
    $('#myPopup').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 mb-0" style="display: flex;align-items: center;">
  <div class="popup"><h6>My team</h6>
    <span class="popuptext" id="myPopup">My team members:<br>AAA<br>BBB<br>CCC</span>
  </div>
</div>
<ol class="breadcrumb"></ol>

Hide pop up clicking anywhere

2 Answers2