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.
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: http://codepen.io/FelixB/pen/EPvEVG
The 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 < 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) {
}
You must make modals unique to be able to select them later. One way to do this is through id
.
<div id="modal-window-one" class="modal-window modal"></div>
<div id="modal-window-two" class="modal-window modal"></div>
You need to define which button which window should open. One possible solution for this is through data-attributes
<div class="click-to-open" data-modal="modal-window-one"> //will open modal one
<div class="click-to-open" data-modal="modal-window-two"> //will open modal two
And then - event:
var btn = document.getElementsByClassName("click-to-open");
for (var i = 0; i < btn.length; i++) {
var thisBtn = btn[i];
thisBtn.addEventListener("click", function(){
var modal = document.getElementById(this.dataset.modal);
modal.style.display = "block";
}, false);
Again - this is one possible solution.