Subscribe

Vanilla JavaScript Modal Popup Box

โœ๏ธ

Learn how easy it is to make your own JavaScript Modal! In this tutorial we will create a popup box to show the user important information.

17 Aug, 2020 ยท 4 min read

In today's tutorial, we'll look at another famous feature that can easily be self-made: the popup modal - and we will build it in Vanilla JavaScript.

Once you click a button or link, a popup box with text or an image appears.

This is easy to code 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 have just the modal button visible and our modal down in our structure.

CSS Modal popup

The CSS is not our primary 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 popup is, by default, not visible and on a zero opacity.

Once the popup modal gets the open class, we set the visibility and make it full opacity. Then the modal appears.

Vanilla JS Popup Code example

The most amazing part is the JavaScript code example for our popup!

const modals = document.querySelectorAll('[data-modal]');

modals.forEach(function (trigger) {
  trigger.addEventListener('click', function (event) {
    event.preventDefault();
    const modal = document.getElementById(trigger.dataset.modal);
    modal.classList.add('open');
    const 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 for the click trigger. Once the click is triggered, 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 popup in Vanilla JavaScript that you can customize and style as you wish. No big libraries, no weird code you don't understand.

Note: This code is not accessible but showcases the Vanilla JavaScript code. To make it accessible, you can use a plugin like Details Dialog

View the example and the code for the pop-op modal on Codepen

See the Pen Vanilla JavaScript Modal Pop-up by Chris Bongers (@rebelchris) on 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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

JavaScript sending data between windows

9 Sep, 2022 ยท 4 min read

JavaScript sending data between windows

Using the native payment request JavaScript API

9 Aug, 2022 ยท 8 min read

Using the native payment request JavaScript API

Join 1828 devs and subscribe to my newsletter