title: Close pop-up box with mouse click outside boundary
body: <p>I have made this homepage. That has pop up boxes with log-in fields. When there is a pop up the background is dimmed. But the pop up should close if the user clicks any where outside the boundaries of the box. I have created the function closeOverlay, which works when the user hits "esc" on the keyboard, but when the user clicks outside the boundary of the box nothing happens. How can I make it so it works in both cases, when the user hits escape, or takes the mouse outside of the box boundaries and clicks</p>
  
  <p>This is the HTML code   </p>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="LAb2css.css"&gt;
  &lt;/head&gt;
  &lt;script&gt;
      window.onload = function() {
  
  
          setInterval(move, 10000);
  
      }
  
  
  
      function move() { //makes the box move in relation to the box div
                var d = document.getElementById('moveQuestion');
                var boxh = document.getElementById('boxDIV').clientHeight - 100; //keeps the image in the box by subtracting height
                var boxw = document.getElementById('boxDIV').clientWidth - 100; //keeps the image in the box by subtracting the width
  
                document.onmousemove = function calc(e) {
                  var x = e.clientX ;
                  var y = e.clientY;
  
                  if (x &lt; boxw) {
                      d.style.left = x +'px';
                  }
  
                  if (y &lt; boxh) {
                      d.style.top = y +'px';
                  }
  
                };
            };
  
  
  function signin() { //displays the sign in form
              var lg = document.getElementById('login');
              var ov = document.getElementById('BackDIV');
              ov.style.display = 'block';
              lg.style.display = 'block';
            };
  
  function join() { //calls the join form for users to register
  
              var lg = document.getElementById('signup');
              var ov = document.getElementById('BackDIV');
              ov.style.display = 'block';
              lg.style.display = 'block';
              activeForm = 1; //sets the active form counter to 1; a form is active
          };
  function recoverPass() { //displays the recoverPassword form for the user to recover password
  
              var ov = document.getElementById('BackDIV');
              ov.style.display = 'block';
  
              var rp = document.getElementById('recoverPassword');
              rp.style.display = 'block';
               //sets the active form counter to 1; a form is active
          };    
  
  
  
  
  
           function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none 
              var ov = document.getElementById('BackDIV');
              var rp = document.getElementById('recoverPassword');
              var lg = document.getElementById('login');
              var sg = document.getElementById('signup');
  
              ov.style.display = 'none';
              rp.style.display = 'none';
              lg.style.display = 'none';
              sg.style.display = 'none';
            };
  
  
  
  
       function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none 
              var ov = document.getElementById('BackDIV');
              var rp = document.getElementById('recoverPassword');
              var lg = document.getElementById('login');
              var sg = document.getElementById('signup');
  
              ov.style.display = 'none';
              rp.style.display = 'none';
              lg.style.display = 'none';
              sg.style.display = 'none';
            };
  
  
  
               function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none 
              var ov = document.getElementById('BackDIV');
              var rp = document.getElementById('recoverPassword');
              var lg = document.getElementById('login');
              var sg = document.getElementById('signup');
  
              ov.style.display = 'none';
              rp.style.display = 'none';
              lg.style.display = 'none';
              sg.style.display = 'none';
            };
  
  
            document.onkeydown = function(evt) { //makes the escape key to call the closeOverlay() function
              evt = evt || window.event;
              if (evt.keyCode == 27) {
                  closeOverlay();
              }
            };
  
  
  
  &lt;/script&gt;
  
  &lt;body onload = move()&gt;
  
      &lt;div id="BackDIV"&gt;
      &lt;/div&gt;
  
      &lt;p&gt;
          &lt;?php
              // Just for displaying the display type for testing
  
              echo 'Display type = ' . $display_type . '&lt;br&gt;&lt;br&gt;';
  
              if ($display_type == 'Start') {
                  echo 'StartPage&lt;br&gt;';
              }
              else if ($display_type == 'SignIn') {
                  echo "StartPage with 'SignIn' popup box&lt;br&gt;"; 
              }
              else if ($display_type == 'Join') {
                  echo "StartPage with 'Join' popup box&lt;br&gt;"; 
              }
              else if ($display_type == 'ForgotPassword') {
                  echo "StartPage with 'ForgotPassword' popup box&lt;br&gt;"; 
              }
              else {
                  echo 'StartPage with no popup box&lt;br&gt;'; 
              }
          ?&gt;
      &lt;/p&gt;
  
  
      &lt;div id = "main"&gt;
  
          &lt;div id = "dateDIV"&gt;&lt;?php $t = time(); echo (date("Y-m-d H:i:s", $t)); ?&gt;&lt;/div&gt;
  
          &lt;div id = "titleDIV"&gt;
            &lt;h2&gt;Thompson Rivers University - Question/Answers&lt;/h2&gt;                    
          &lt;/div&gt;
  
          &lt;div id ="dopDownDIV"&gt;
              &lt;ul&gt;
                &lt;li&gt;
                  &lt;a href = "#"&gt;&lt;img src="images/responsive_menu.png" title="MENU" alt="Menu" id="MenuIMG" height="50PX" width="50px" /&gt;&lt;/a&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#" onclick = "signin()"&gt;SIGN IN&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#" onclick="join()"&gt;JOIN&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#" onclick="recoverPass()"&gt;FORGOT PASSWORD&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;       
          &lt;/div&gt;
  
          &lt;div id="boxDIV"&gt; &lt;a href ="#"&gt;&lt;img src ="images/question-mark.png" id="moveQuestion" title= "Image moving In Box" alt="ImgInbox" height = "100px" width = "100px"&lt;/a&gt;&lt;/div&gt;
  
          &lt;div id= "BottomDIV"&gt;
              &lt;a href = "http://cs.tru.ca" target="_blank"&gt; About Us &lt;/a&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;!--Div for Signup form on click --&gt;
   &lt;div id="signup" onclick="closeOverlay()"&gt;
              &lt;form action="main.html" method="get" autocomplete="on"&gt;
                  &lt;input type="text" name="username" autofocus&gt;&lt;br /&gt;&lt;p&gt;Your email address&lt;/p&gt;
                  &lt;input type="password" name="password"&gt;&lt;br /&gt;&lt;p&gt;Password&lt;/p&gt;
                  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
                  &lt;input id="formButton" type="submit" value="Join"&gt;
                  &lt;a href="StartPage.html"&gt;
                      &lt;input type="button" value="Cancel"/&gt;
                  &lt;/a&gt;
              &lt;/form&gt;
   &lt;/div&gt;
  
  
  &lt;!--DIv for recoverPassword --&gt;
  
  &lt;div id="recoverPassword" onclick="closeOverlay()"&gt;
              &lt;!--&lt;h1&gt;Recover Password&lt;/h1&gt; --&gt;
              &lt;form action="main.html" method="get" autocomplete="on"&gt;
                  &lt;input type="text" name="recoveremail" placeholder="The email address you registered with" autofocus&gt;&lt;br /&gt;&lt;p&gt;Username (or email address)&lt;/p&gt;
  
                  &lt;input id="formButton" type="submit"&gt;
                  &lt;a href="StartPage.html"&gt;
                      &lt;input type="button" value="Cancel"/&gt;
                  &lt;/a&gt;
              &lt;/form&gt;
          &lt;/div&gt;  
  
  &lt;!--Div for Login --&gt;
      &lt;div id="login" onclick="closeOverlay()"&gt;
  
              &lt;form action="controller.php" method="post" autocomplete="on" &gt;
                  &lt;input type='hidden' name='command' value='SignIn'&gt;
                  &lt;input type="text" name="user" autofocus value="&lt;?php echo $username ?&gt;"&gt; &lt;?php echo $error_msg_username; ?&gt; &gt;&lt;br /&gt;                            &lt;p&gt;Username (or email address)&lt;/p&gt;
                  &lt;input type="password" name="pass" value="&lt;?php echo $password ?&gt;"&gt; &lt;?php echo $error_msg_password ?&gt; &gt;&lt;br /&gt;&lt;p&gt;Password&lt;/p&gt;
                  &lt;br/&gt;
                  &lt;input type="submit" id="formButton" value="Sign In" &gt;
                  &lt;a href="StartPage.html"&gt;
                      &lt;input type="button" value="Cancel"/&gt;
                  &lt;/a&gt;
  
  
              &lt;/form&gt;
          &lt;/div&gt;
  
  
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>