title: Opening multiple modal boxes on one page
body: <p>I have a page that needs to have different modal boxes open when their corresponding link on the page is clicked. I've got the structure and javascript to work for ONE window, but I can't get it to work for more than one. I am thinking I need to loop through each modal box...but can't quite figure out the syntax.</p>
  
  <p>This is for a client's WordPress site, and I'm using Advanced Custom Fields to populate the content. The page isn't published yet, so here's a codepen that shows my code: <a href="http://codepen.io/FelixB/pen/EPvEVG" rel="noreferrer">http://codepen.io/FelixB/pen/EPvEVG</a></p>
  
  <p>The code:</p>
  
  <pre><code>var modal = document.getElementsByClassName('modal-window');
  
  var btn = document.getElementsByClassName("click-to-open");
  
  var span = document.getElementsByClassName("close")[0];
  
  for (var i = 0; i &lt; btn.length; i++) {
    var thisBtn = btn[i]
    thisBtn.onclick = function() {
      alert("hello");
  
      //modal.style.display = "block";
    }
  }
  
  span.onclick = function() { 
    modal.style.display = "none";
  }
  
  window.onclick = function(event) {
  
  }
  </code></pre>