Today we'll be looking at another famous plugin that can easily be self-made.
It's the lightbox/modal function, once you click a button or link a pop-up with the content or an image appears.
This is easy to make with some simple CSS and JavaScript.
HTML Structure
<div class="container">
<a data-modal="modal-one">Open Modal</a>
</div>
<div class="modal" id="modal-one">
<div class="modal-bg modal-exit"></div>
<div class="modal-container">
<h1>Amazing Modal</h1>
<h2>Pure Vanilla JavaScript</h2>
<button class="modal-close modal-exit">X</button>
</div>
</div>
As for our HTML we are having just the modal button visible, and our modal down in our structure.
CSS Modal
The CSS is not really our main focus, but let's walk through it.
.modal {
position: fixed;
width: 100vw;
height: 100vh;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
&.open {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
&-bg {
position: absolute;
background: teal;
width: 100%;
height: 100%;
}
&-container {
border-radius: 10px;
background: #fff;
position: relative;
padding: 30px;
}
&-close {
position: absolute;
right: 15px;
top: 15px;
outline: none;
appearance: none;
color: red;
background: none;
border: 0px;
font-weight: bold;
cursor: pointer;
}
}
As you can see, nothing fancy, some basic styling, the only thing worth mentioning is that the modal is by default not visible and on a zero opacity.
Once it gets the open class, we set the visibility and make it full opacity.
JavaScript Modal Pop-up
On to the most amazing part, the JavaScript!
var modals = document.querySelectorAll('[data-modal]');
modals.forEach(function(trigger) {
trigger.addEventListener('click', function(event) {
event.preventDefault();
var modal = document.getElementById(trigger.dataset.modal);
modal.classList.add('open');
var exits = modal.querySelectorAll('.modal-exit');
exits.forEach(function(exit) {
exit.addEventListener('click', function(event) {
event.preventDefault();
modal.classList.remove('open');
});
});
});
});
So what we are doing is selecting all the data-modal attributes elements and loop over them. These are our triggers, so we need to add an eventListener to them.
Once we click, we find the modal based on the dataset and add the open class to it.
We then search for all the modal-exit classes within the modal.
Which are the background and the cross button.
There you go, a simple pop-up that you can customize and style as you wish, no big javascript libraries, no weird code you don't understand.
Note: This code is not accessible, but showcases the JavaScript part, to make it accessible you can use a plugin like Details Dialog
You can view this example on the following Codepen.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Top comments (6)
If you're not going to make it accessible, why not use the native
<dialog>? (with polyfill for Firefox)At least you'd get keyboard navigation (almost) right.
Good question, no real reason, I guess a div will safe you the polyfill?
at this point I just didn't see a better reason to use a Dialog which will need more styling and fallbacks, but also just didn't cross my mind haha.
I might write about Dialog useage, the great thing about devs is there's always 101 options to do the same thing, so it's great seeing alternatives like Dialog!
Note that "if you're not going to make it accessible" was a somewhat-passive-aggressive way of saying "please make it accessible"; or at a minimum end the post with a note that this is in no way something that you should actually use in production.
It's great to understand how to build things, but you've only put the 20% effort to get the 80% functionality, and the remaining 20% is crucial! and because it'll be 80% of the final effort, and requires solid knowledge of accessibility, you should really go for a third-party library that gets it right (and/or that you'll be able to easily update to get the fixes and improvements).
One lightweight library you could consider here: github.com/github/details-dialog-e... (small, zero dependency, good fallback)
I added a note to my post thank you Thomas, also for explaining this in more detail to me! 🤟
how would we implement the esc key in vanilla js to this? thanks
Hey, would work something like this:
codepen.io/rebelchris/pen/VwaWgwp
But be aware, the new macs for instance don't come with this key, so it's a bit more tricky there.