Close overlay by clicking on background
<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>