title: Close overlay by clicking on background
body: <p>I'm trying to close an overlay window by clicking on the outer body only.
  The problem is that the overlay get closed even if I click on the overlay panel itself and if I click on any other element i put in it (divs, buttons, icons etc etc...)
  I don't know how to target only the body around the overlay and not the overlay window itself.
  Can you please help? </p>
  
  <p>Here is both html markup and related JS.</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div class"other-content"&gt;
          &lt;!-- other content --&gt;
      &lt;/div&gt;
      &lt;!-- The Modal --&gt;
      &lt;div id="myModal" class="modal"&gt;
          &lt;!-- Modal content --&gt;
          &lt;div class="modal__content"&gt;
              &lt;!-- some content - divs, buttons etc etc --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>       $(document).on('click',"#myModal", function(e) {       
            $('#myModal').fadeOut();                
         });
  </code></pre>