title: How to close div (modal) clicking outside. Pinterest and Facebook way
body: <p>The classic way to is to do a modal is a div with the content (dialog) and a div with z-index lower (overlay)
  Then, I can bind the click event on the overlay and hide de content dialog.</p>
  
  <pre><code>&lt;div class="dialog"&gt;...&lt;/div&gt;
  &lt;div class="overlay" style="background-color:rgba(255, 255, 255, 0.9)"&gt;
  </code></pre>
  
  <p>But I have noticed that Pinterest and Facebook combines it to one div.</p>
  
  <pre><code>&lt;div class="overlay" style="background-color:rgba(255, 255, 255, 0.9);position: fixed; z-index: 9999;top: 0;right: 0;bottom: 0;left: 0;"&gt;
        &lt;div class="dialog" style="position: static;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But in this approach, how can I bind the click event to close de dialog only in the overlay that not have the dialog?</p>
  
  <p><a href="http://jsfiddle.net/mCupS/9/" rel="nofollow">http://jsfiddle.net/mCupS/9/</a></p>