title: Window.onclick not working in modal box
body: <p>I have a modal box of html inside a php foreach loop. I am using javascript to display and hide the modal box by using onclick event. The Problem is bot my onclick event to display and hide functions are working, but when I click on the window outside the modal box it's not hiding the modal box.</p>
  
  <p>I think It might be because I an printing several modal box in the php loop and the javascript does not know which one to close. </p>
  
  <p>I just want to close all the modal box but don't know how to get it done</p>
  
  <p>Thanks in advance</p>
  
  <p>My javascript:</p>
  
  <pre><code>&lt;script&gt;
  // Get the modal
  var currentIndex;
  var modal = document.getElementsByClassName('myModal');
  
  // Get the button that opens the modal
  var btn = document.getElementsByClassName("myBtn");
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close");
  
  // When the user clicks the button, open the modal 
      function display(index) {
              modal[index].style.display = "block";
          currentIndex = index;
      } 
  
  function notdisplay(index){
          modal[index].style.display = "none";
  
      }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  
  // When the user clicks anywhere outside of the modal, close it
  
  
  window.onclick = function(event) {
      if (event.target == modal[currentIndex]) {
          modal.style.display = "none";
      }
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>My modal box inside the php loop:</p>
  
  <pre><code>&lt;div class="col-md-7 offset-md-2 myBtn" onclick="display('.$index.')" style="margin-left:20px;"&gt;
  &lt;span onclick="notdisplay('.$index.')" class="close"&gt;&amp;times;&lt;/span&gt;
  </code></pre>