title: Modal not closing properly
body: <p>I am trying to create a simple modal. I want it to close when the user clicks anywhere on the window - however, the modal closes only when the user clicks outside of the modal, even though the event target is set to the whole modal.</p>
  
  <p>I know that the problem is the last line of the javascript code but I can't understand why...I have defined <code>e.target == modal</code>, where <code>modal</code> is the HTML element of the whole modal, including the children's elements (by the class of <code>modal-content</code>). However, the <code>modal-content</code> class does not seem to be affected by <code>e.target == modal</code>.</p>
  
  <p>Here is the full code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Get modal element
  var modal = document.getElementById('simpleModal');
  //Get open modal button
  var modalBtn = document.getElementById('modalBtn');
  //Get close button
  var closeBtn = document.getElementsByClassName('closeBtn')[0];
  
  
  //Listen for click
  modalBtn.addEventListener('click', openModal);
  
  //Listen for close clock
  closeBtn.addEventListener('click', closeModal);
  
  //Listen for outside click
  window.addEventListener('click', outsideClick);
  
  
  //Fucntion to open modal
  function openModal(){
      modal.style.display = 'block';
  }
  
  //Fucntion to close modal
  function closeModal(){
      modal.style.display = 'none';
  }
  
  
  function outsideClick(e){
      if(e.target == modal){
          modal.style.display = 'none';
      }
      
  
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 17px;
      line-height:1.6;
  }
  
  .button{
      background: coral;
      padding: 1em 2em;
      color: #fff;
      border: 0px;
  }
  
  .button:hover{
      background: #333;
  }
  
  .modal{
      display:none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      height:100%;
      width:100%;
      overflow:auto;
      background-color:rgba(0, 0, 0, 0.5);
      animation-name:modalopen;
      animation-duration:1s;
  }
  
  .modal-content{
      background-color: #f4f4f4;
      margin: 20% auto;
      padding:20px;
      width: 70%;
      box-shadow: 10px 20px 40px rgba(0, 0, 0);
  }
  
  .closeBtn{
      color:#ff0000;
      float:right;
      font-size:30px;
  }
  
  .closeBtn:hover, .closeBtn:focus{
      color:#000;
      text-decoration: none;
      cursor:pointer;
  }
  
  @keyframes modalopen{
      from{opacity: 0}
      to{opacity:1}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content ="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Simple Modal&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      
      &lt;button id="modalBtn" class="button"&gt;Click Here&lt;/button&gt;
      
      &lt;div id="simpleModal" class="modal"&gt;
          &lt;div class="modal-content"&gt;
              &lt;span class="closeBtn"&gt;&amp;times;&lt;/span&gt;
              &lt;p&gt;Hello...I am a modal&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>