hide popup when clicking outside

Question

Here is a example of a javascript popup:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

How would you modify this so that the popup disappears if you click anywhere outside the popup? I am using html5 and javascript within an epub3 document.

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) — Lars-Olof Kreim, Jul 04 '18 at 07:49

score 0 · Answer 1 · answered Jul 04 '18 at 09:52

$('#trigger').bind('click touch', function(){
 $('#tooltip').show();
});   

$(document).bind('click touch', function(event) {
  if (!$(event.target).parents().addBack().is('#trigger')) {
    $('#tooltip').hide();
  }
});

// Stop propagation to prevent hiding "#tooltip" when clicking on it
$('#tooltip').bind('click touch', function(event) {
  event.stopPropagation();
});

   * {
    margin: 0;
    padding: 0;
   }
   
   body,
   html {
    height: 100%;
   }
   
   body {
    font-size: 14px;
    line-height: 1.5;
    font-family: Helvetica, Arial, sans-serif;
    color: #000;
   }
   
   #container {
    position: relative;
    min-height: 100%;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    zoom: 1;
   }
   
   #trigger {
    width: 200px;
    height: 200px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 22px;
    line-height: 200px;
    color: #fff;
    background: #ccc;
    cursor: pointer;
   }
   
   #trigger:hover {
    background: #0A9E01;
   }
   
   #tooltip {
    display: none;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 250px;
    padding: 20px;
    font-size: 18px;
    color: #fff;
    background: #222222;
   }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <!--Meta Tags-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="imagetoolbar" content="no" />
  <meta name="author" content="mihai vaduva" />
  <meta name="email" content="" />
  <meta name="copyright" content="" />
  <meta name="distribution" content="global" />
  <meta name="rating" content="general" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="description" content=""/>
  <meta name="keywords" content=""/>
  
  <!-- include jQuery library -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  
  <!--Title-->
  <title>Antimath - Hide if click outside</title>
 </head>
 <body>
  <!--container-->
  <div id="container">
   <noscript>
    <p class="warning">You have <a href="http://www.google.com/support/bin/answer.py?answer=23852">JavaScript disabled</a> or are viewing the site on a device that does no support JavaScript.Some features may not work properly.</p>
   </noscript>
   
   <div id="trigger">
    Click Me !
   </div>
   
   <div id="tooltip">
    Now click anywhere to hide it.
   </div>

  </div>
  <!--/container-->
 </body>
</html>

hide popup when clicking outside

1 Answers1

Linked