title: Loop through querySelectorAll
body: <p>I've got a function to close a modal when clicking anywhere outside of it. This is the code
  JS:</p>
  
  <pre><code>var modal = document.querySelectorAll('.quickview-modal')
  // When the user clicks anywhere outside of the modal, close it
  modal.forEach(function() {
  window.onclick = function(event) {
    if (event.target == modal) {
      $('.item').removeClass('modal-carousel-fix');
      $('.modal-backdrop').css('display','none')
      $('.quickview-modal').css('display','none');
      $(this).parent().closest('.carousel-inner').css('overflow', 'hidden');
    }
   }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="modal quickview-modal" id="quickViewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;Modal Content&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But this doesn't seem to work. 
  If I change it to </p>
  
  <pre><code>var modal = document.querySelector('.quickview-modal')
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      $('.item').removeClass('modal-carousel-fix');
      $('.modal-backdrop').css('display','none')
      $('.quickview-modal').css('display','none');
      $(this).parent().closest('.carousel-inner').css('overflow', 'hidden');
    }
   }
  </code></pre>
  
  <p>It works on the first <code>.quickview-modal</code> object, so I'm assuming something is wrong with the loop. Any ideas how to fix this?</p>