Handling Multiple Modals on One Page with Vanilla JS

Here is a little JS snippet for opening and closing multiple modals on a page

Sometimes I have little prototypes or one-pagers that have multiple modal overlays.

Giving each modal an unique name bloats up the code and gets out of hand – especially if you’re using vanilla JavaScript:

<!-- Elements used for triggering modals to open -->
<button class="modal-trigger" id="modal-1-trigger">
<button class="modal-trigger" id="modal-2-trigger">
<!-- Elements used as modals -->
<div id="modal-1" class="modal">
...
</div>

<div id="modal-2" class="modal">
...
</div>

<script>
let modal1 = document.getElementById('modal-1');
let modal2 = document.getElementById('modal-2');
let modal1Trigger = document.getElementById('modal-1-trigger');
let modal2Trigger = document.getElementById('modal-2-trigger');

function toggleModal() {
...
}

...
</script>
</button>
</button>

Use For…Of-Loops for Modals

So instead of explicitly naming and calling each modal, modal trigger and close button, I use arrays and for...of-loops like so:

In the HTML, give each modal trigger the same class name. Then in the JS, get those elements by the class name and store them in an array:

const triggers = document.getElementsByClassName("trigger");
const triggerArray = Array.from(triggers).entries();

Get each modal and close button:

const modals = document.getElementsByClassName("modal");
const closeButtons = document.getElementsByClassName("btn-close");

Then use for...of-loop with the index of each item in triggerArray for listening to a click event which toggles each modal to open and close:

for (let [index, trigger] of triggerArray) {
let triggerIndex = index;
function toggleModal() {
modals[triggerIndex].classList.toggle("show-modal");
}
trigger.addEventListener("click", toggleModal);
closeButtons[triggerIndex].addEventListener("click", toggleModal);
}

The result:

See the Pen Loop to get modals by screenspan (@screenspan) on CodePen.


Published: Feb 16, 2018

More from my blog