How to make click only on modal exterior and not on dialog/content?

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.

enter image description here
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 stopPropagation(), pointer-events:none;, 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:

    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();
  });  
});

And HTML:

calendar

Not really sure what I’m doing wrong, I don’t know how to do this in an extension.