title: How to make click only on modal exterior and not on dialog/content?
body: <p>So I'm making an extension for Google Chrome with my friend, and for most of the features (i.e. calendar, settings, etc.) we open a modal so we don't have to redirect to another page. We are trying to get the modal to close when you click outside of the content. Here's a little markup screenshot to give you an idea of what I'm talking about.</p>
  
  <p><a href="https://i.stack.imgur.com/LQRyM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LQRyM.png" alt="enter image description here"></a>
  I want to be able to close the modal by clicking outside the white area. Currently it closes even when I click inside the white area. I have tried pretty much everything, including <code>stopPropagation()</code>, <code>pointer-events:none;</code>, and jquery disabling. None of them work for reasons unknown to me. Something weird about Chrome Extensions, I guess.
  Here's some of my code so far:</p>
  
  <pre><code>    function calendar() {
        document.getElementById("calendmodal").style.display = "block";
      }
  
  document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("calendicon").addEventListener("click", calendar);
    document.getElementById("calendmodal").addEventListener("click", closeModal);
    document.getElementById("calendmodal").addEventListener("click", function(event) {
      event.stopPropagation();
    });  
  });
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;div class="icons" id="icons_calendar"&gt;
          &lt;img src='https://preview.ibb.co/jE76Bm/calendar.png' alt="calendar" border="0" id="calendicon"/&gt;
        &lt;/div&gt;
      &lt;div id=calendmodal class="generalmodal"&gt;
        &lt;div class="modal-content" id="calendcontent"&gt;
          &lt;iframe src="https://calendar.google.com/calendar/embed?src=googleapps.wrdsb.ca_ptpdj55efmhg1nb89ruc15fi3k%40group.calendar.google.com&amp;ctz=America%2FToronto" style="border: 0" width="800" height="600" frameborder="0" scrolling="no" visibility="hidden" id="calendiframe"&gt;&lt;/iframe&gt;
          &lt;p id=infostuff&gt;For a more extensive calendar and&lt;br&gt;more school tools, visit &lt;a href="http://jam.wrdsb.ca"&gt;The SJAM Website&lt;/a&gt;.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Not really sure what I'm doing wrong, I don't know how to do this in an extension.</p>