title: Close Modal Popup on ClickOutside
body: <p>I have a jquery modal popup. How do I execute <code>popup.close()</code> when the user clicks outside of the popup (initialized in the jquery as <code>var popup</code>)</p>
  <pre><code>$(document).ready(function(){     
      // Find element with class popup, register an on click event
      $('#new-alert').click(function(){
          
          var popup = new $.flavr({                                
              /* Add an onBuild hook and create the button here */
              onBuild     : function( $cont ){
                  
                  var popup = this;                    
                  var outer = $cont.find('.flavr-outer');                    
                  
                  /* clicking x successfully closes */
                  close = $('&lt;img src=&quot;/vendor/flavr/images/close.png&quot; /&gt;');
                  close.css({ position: 'absolute', top: '4px', right: '4px', cursor: 'pointer' });
                  close.on('click', function(){ popup.close() });
                  outer.css('position', 'relative').append(close);
  
                  popup.on('clickoutside', function(){ popup.close() });
              },
              content     : 'Test x Close Button',
              buttons     : false
          });
          
          // Add a return false to prevent anchor directing the browser
          return false;
      
      });
  });
  </code></pre>
  <p>This is what the button looks like:</p>
  <p><a href="https://i.stack.imgur.com/lZLLA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lZLLA.png" alt="enter image description here" /></a></p>
  <h3>Currently attempt</h3>
  <pre><code>popup.on('clickoutside', function(){ popup.close() });
  </code></pre>
  <p>but the jquery doesn't load when I add that statement.</p>