How to Build a JavaScript Popup Modal From Scratch

In this tutorial we’ll learn how to build JavaScript modals (popup windows) without using a framework like Bootstrap, or a third party library. We’ll build the whole thing from scratch, giving us complete control over how it works and looks.

Here’s the demo we’ll be creating:

Please accept marketing cookies to load this content.

1. Begin With the Page Markup

First, we’ll create a modal. To do this, we’ll add the .modal class and a unique ID to a container. Next, we’ll specify the dialog by setting a .modal-dialog element as the direct child of the .modal. The dialog will hold the modal content. This can be any kind of content like text, images, lightboxes, user notifications/alerts, etc.

“A pop-up (or modal) is a small UI element that will appear in the foreground of a website, usually triggered as a prompt for the user to do something” – Adi Purdila

To open a modal, we’ll need any element with the data-open attribute (normally a button). The value of this attribute should be the ID of the desired modal.

By default, a modal will close if we click outside its boundaries or when the Esc key is pressed. But, we can also close it if we click on any element with the data-close attribute (normally a button).

Initially, the modal will appear/disappear with a fade effect. But we have the ability to adjust the animation effect of the dialog via the data-animation attribute. The value of this attribute which has to be added to the .modal can be any of the following values:

slideInOutDown
slideInOutTop
slideInOutLeft
slideInOutRight
zoomInOut
rotateInOutDown
mixInAnimations

We’ll have a closer look at these values in an upcoming section.

For now, let’s get familiar with the markup needed for representing a single modal:

<button type="button" class="open-modal" data-open="modal1">...</button>

<div class="modal" id="modal1">
  <div class="modal-dialog">
    <header class="modal-header">
      ...
      <button class="close-modal" aria-label="close modal" data-close>✕</button>
    </header>
    <section class="modal-content">...</section>
    <footer class="modal-footer">...</footer>
  </div>
</div>

2. Define Some Basic Styles

With the markup ready, we’ll set up a few CSS variables and reset styles:

:root {
  --lightgray: #efefef;
  --blue: steelblue;
  --white: #fff;
  --black: rgba(0, 0, 0, 0.8);
  --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

* {
  padding: 0;
  margin: 0;
}

button {
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  font-size: inherit;
}

Next, we’ll horizontally and vertically center the page contents. Plus, we’ll give some styles to the button responsible for opening the modal:

/*CUSTOM VARIABLES HERE*/

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font: 16px/1.5 sans-serif;
}

.btn-group {
  text-align: center;
}

.open-modal {
  font-weight: bold;
  background: var(--blue);
  color: var(--white);
  padding: .75rem 1.75rem;
  margin-bottom: 1rem;
  border-radius: 5px;
}

At this point, we’ll focus our attention on the modal styles.

Each modal will have the following characteristics:

It’ll be full-screen with a fixed position. That said, it'll look like an overlay that covers the entire window’s width and height.
It’ll have a dark background color.
It’ll be hidden by default.
The dialog will be horizontally and vertically centered.

/*CUSTOM VARIABLES HERE*/

.modal { 
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--black);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: all 0.35s ease-in;
}

The dialog will have a maximum width and a maximum height. Its height will be 80% of the window height. In cases where its height exceeds that value, a vertical scrollbar will appear:

/*CUSTOM VARIABLES HERE*/

.modal-dialog {
  position: relative;
  max-width: 800px;
  max-height: 80vh;
  border-radius: 5px;
  background: var(--white);
  overflow: auto;
  cursor: default;
}

As a last thing, we’ll define a few straightforward styles for the individual content sections:

/*CUSTOM VARIABLES HERE*/

.modal-dialog > * {
  padding: 1rem;
}

.modal-header,
.modal-footer {
  background: var(--lightgray);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header .modal-close {
  font-size: 1.5rem;
}

.modal p + p {
  margin-top: 1rem;
}

A page can have more than one JavaScript modal. But as already discussed earlier, all modals will initially be hidden.

Similarly, a page can have more than one open triggers (elements with the data-open attribute). Each time a trigger is clicked, the associated modal should become visible with a fade-in animation. Remember the data-open attribute value has to match the ID of a modal.

Here’s the script which reveals a modal:

const openEls = document.querySelectorAll("[data-open]");
const isVisible = "is-visible";

for(const el of openEls) {
  el.addEventListener("click", function() {
    const modalId = this.dataset.open;
    document.getElementById(modalId).classList.add(isVisible);
  });
}

And the relevant CSS classes:

.modal {
  visibility: hidden;
  opacity: 0;
  transition: all 0.35s ease-in;
}

.modal.is-visible {
  visibility: visible;
  opacity: 1;
}

With our implementation, only a single modal can appear at a time (this code doesn’t support nested modals). As mentioned in the markup section above, there are three methods available for hiding it with a fade-out effect.

Let’s recap.

Firstly by clicking on the custom [data-close] element which is located inside the modal:

const closeEls = document.querySelectorAll("[data-close]");
const isVisible = "is-visible";

for (const el of closeEls) {
  el.addEventListener("click", function() {
    this.parentElement.parentElement.parentElement.classList.remove(isVisible);
  });
}

Secondly by clicking on everything outside of the modal:

const isVisible = "is-visible";

document.addEventListener("click", e => {
  if (e.target == document.querySelector(".modal.is-visible")) {
    document.querySelector(".modal.is-visible").classList.remove(isVisible);
  }
});

In this case, the modal (overlay) behaves as a giant close button. For this reason, we gave it cursor: pointer.

Lastly by pressing the Esc key:

const isVisible = "is-visible";

document.addEventListener("keyup", e => {
  if (e.key == "Escape" && document.querySelector(".modal.is-visible")) {
    document.querySelector(".modal.is-visible").classList.remove(isVisible);
  }
});

Now is a good time to look at what we’ve created so far:

Please accept marketing cookies to load this content.

The modal looks pretty good! Notice that each time we click on an open trigger, only the corresponding modal loads.

Let’s take it one step further and examine some ideas for animating its dialog.

4. Add Dialog Animations

As we said earlier, the default behavior of the modal is to fade in and fade out. But there’s the option to adjust the animation effect of the popup.

I’ve already created a bunch of animation effects that you can use as an alternative to the fade effect. To do this, just pass the data-animation="yourDesiredAnimation" attribute to the .modal.

For example, if you want the dialog to appear with a slide animation from left to right, you’ll need the slideInOutLeft effect.

Behind the scenes, there are two rules that accomplish this desired animation:

/*CUSTOM VARIABLES HERE*/

[data-animation="slideInOutLeft"] .modal-dialog {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.5s var(--bounceEasing);
}

[data-animation="slideInOutLeft"].is-visible .modal-dialog {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}

Check the modal with this type of animation here:

Please accept marketing cookies to load this content.

You can check the rest of the animations by looking at the CSS tab of the final demo project. Depending on the complexity of the animations, I’ve used either CSS transitions or animations to build them.

I’ve also made use of the cubic-bezier() function for setting the timing function for all transitions. If you don’t like the bounce effect that produces, feel free to change it to something smoother via the --bounceEasing CSS variable.

Have a look at the final demo with all the animation effects here:

Please accept marketing cookies to load this content.

As a nice extra, this tutorial has been updated with a full-screen modifier version.

Let’s go a step further and make our modal full-screen. For this scenario, I’ve created a new demo to make it easier for you to understand the styles. In terms of the modal’s functionality, nothing will change.

Please accept marketing cookies to load this content.

This time the dialog won’t have a maximum width and height; it’ll expand to cover the viewport size. Also, it’ll be a flex container, and its footer will stick at the bottom regardless of the modal content.

If you want to learn more on how to create a sticky footer, have a look at this tutorial.

2 Ways to Build a Sticky Footer (Flexbox and CSS Grid)

George Martsoukos

25 Sep 2023

Going even further, let’s look at an alternative implementation of our full-screen JavaScript modal where we place an image on the left side and some text on the right side (on mobile they’re stacked). In addition, there isn’t any header or footer, and the close button sits as an absolutely positioned element at the right top.

Please accept marketing cookies to load this content.

Play with it by resizing the browser window to see how it adapts to various screens.

Of course, you’re welcome to build on this simple modal layout and make its grid more flexible using a framework like Tailwind CSS or Bootstrap. You can also turn the modal into a lightbox by showing an image grid, as we’ve done in this tutorial.

How to Build Seamless Masonry Layouts With CSS Grid and object-fit:cover

George Martsoukos

21 Jul 2022

Conclusion

That’s it, folks! During this tutorial, we learned how to build custom animated JavaScript modal dialogs without relying on any front-end framework. I hope you enjoyed the final result, and building it helped refresh your front-end skills.

Bear in mind that we haven’t considered accessibility, so if you want to enhance this demo that certainly could be the next step.

As always, thanks for reading!

How to Build a JavaScript Popup Modal From Scratch

JavaScript Modal Demo

1. Begin With the Page Markup

2. Define Some Basic Styles

3. Toggle JavaScript Modal

Open JavaScript Modal

Close JavaScript Modal

4. Add Dialog Animations

5. Full-Screen Modal

Conclusion

More Popup Reading