title: Close modal on click outside of the modal JS on iOS
body: <p>How do I make this code <code>close</code> a <code>modal</code> when user clicks outside of the modal window both on <strong>iOS</strong> and non-touch devices?</p>
  
  <p>I know about some other similar topics here regarding <code>window.onclick</code> and <code>touch</code> devices, but I'm relatively new to JS and I don't know how to properly combine this function (for both platforms).</p>
  
  <p><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>var modal = document.getElementById('myModal');
  var btn = document.getElementById("myBtn");
  var span = document.getElementsByClassName("close")[0];
  
  btn.onclick = function() {
      modal.style.display = "block";
  }
  span.onclick = function() {
      modal.style.display = "none";
  }
  var closeModal = function(event) {
    if (event.target == modal) {
       modal.style.display = "none";
    }
  }
  
  window.addEventListener('click', closeModal);
  window.addEventListener('touchend', closeModal);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.modal {
      display: none;
      position: fixed;
      overflow: hidden;
      left: 0;
      bottom: 0;
      width: 100%;
      height: auto;
      background-color: black;
      color: white; 
      font-size: 100%;
  }
  .close {
      color: white;
      float: right;
      font-size: 70%;
  }
  .close:hover, .close:focus {
      color: #000;
      text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myModal" class="modal"&gt;
  
  &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
  
  &lt;p&gt;Some content here&lt;/p&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>