Simple popup modal with vanilla JavaScript.
Today I’ll show you a simple way to setup multiple popup modals with no framework, just plain vanilla JavaScript. I assume you are familiar with JavaScript, HTML for markup and CSS for some styling. The aim here isn’t to make it beautiful but to make it functional.
We’ll start with the markup first. We’ll create two modal triggers for now for simplicity, but the same code will apply for more than two triggers.
<button
type="button"
class="btn btn-sm btn-primary shadow p-2 px-3 popup-trigger"
data-popup-trigger="one">
Popup Trigger One
</button><button
type="button"
class="btn btn-sm btn-primary shadow p-2 px-3 popup-trigger"
data-popup-trigger="two">
Popup Trigger Two
</button>
As you can see the markup is very straight forward. The important thing to take note of is the data attribute data-popup-trigger. This will be used to identify which modal should be triggered to open on click. The rest of the button markup is identical.
Lets do the markup for the modals now.
<div
class="popup-modal shadow"
data-popup-modal="one">
<i class="fas fa-2x fa-times text-white bg-primary p-3 popup-modal__close"></i>
<h1 class="font-weight-bold">
Modal One Title
</h1>
</div><div
class="popup-modal shadow"
data-popup-modal="two">
<i class="fas fa-2x fa-times text-white bg-primary p-3 popup-modal__close"></i>
<h1 class="font-weight-bold">
Modal One Two
</h1>
</div>
Once again, the markup is very straight forward, the modals are identical and the only thing to take note of in this instance is the data attribute data-popup-modal . You’ll notice what the modal triggers and the modals itself have in common, and that is the numbers allocated to the data attributes. This is how we’ll allow the button to associate with the correct modal. This will all add up once we do the JavaScript.
Time to dive into some JavaScript to make it all come together 😄
const modalTriggers = document.querySelectorAll('.popup-trigger')
const modalCloseTrigger = document.querySelector('.popup-modal__close')
const bodyBlackout = document.querySelector('.body-blackout')modalTriggers.forEach(trigger => {
trigger.addEventListener('click', () => {
const { popupTrigger } = trigger.dataset
const popupModal = document.querySelector(`[data-popup-modal="${popupTrigger}"]`)popupModal.classList.add('is--visible')
bodyBlackout.classList.add('is-blacked-out')
popupModal.querySelector('.popup-modal__close').addEventListener('click', () => {
popupModal.classList.remove('is--visible')
bodyBlackout.classList.remove('is-blacked-out')
})
})
})
Ok Lets go through this step-by-step. The first three lines are pretty straight forward, we assign .popup-modal__close, .body-blackout and .popup-trigger to consts.
As you can tell, I select all instances of .popup-trigger with querySelectorAll() which returns a nodeList. This allows me to use the forEach method . The forEach() method allows us to execute a provided function once for each array element, in this instance I called each element trigger and attached a click event listener to each item in the nodeList.
When the click event fires, I use deconstruction to grab the data attribute popupTrigger from the dataset, which will return the number 1 or 2 depending on which button was clicked. I then select the data-popup-modal using template literals (back-ticks) and usepopupTrigger as the placeholder `[data-popup-modal=”${popupTrigger}”]` . This way I select the correct popup modal for that modal button trigger.
I then add the class is--visible to popupModal and is-blacked-out to bodyBlackout which makes both elements visible. bodyBlackout is the background overlay.
lastly, I do a select to find the modal close button .popup-modal__close associated with that modal thats currently open. I attach a click event listener to the close button and simply remove the classes we added when we initiated the click to open the modal.
That’s it 🙂 here a is link to a simple Codepen.
I hope you enjoyed the post and it was helpful in some or other way. Please sign up to my newsletter here. I will be sending updates around the latest tools, resources and articles 🔥 for both designers and developers. Don’t worry, I only post about once or twice a month.
