•10 minutes read

Vanilla Javascript Popup - Modern Animated UI

Summary:Modals are very helpful to display important information to the users. Here is a quick guide to creating popup modal using pure vanilla javascript.

Modal popups are very useful in displaying useful information to the visitors. They are also one most popular ways to grab users attention. Here in this post, you can learn how to code your own modal popup in vanilla javascript.

Modals popups are widely used to:

  • Display messages
  • Collecting email's for newsletter
  • Inform users about sale and offers.
  • Cookie Notification
  • Warning or Danger

How to create Modal Popup with Vanilla Javascript and CSS

Here I have explained the code to create modal in vanilla javascript. It has three main parts.

  • HTML Code
  • CSS Code
  • Vanilla Javascript Code

I have explained each in detailed sections. In the last, you can find the demo link and complete code.

HTML

There is nothing much to explain in the HTML code.

But do note that data-popup-trigger of the buttons must be same as id of the modal which it needs to trigger.

For example:

In the code below button 1 has data-popup-trigger value modal1 so it will trigger modal with id="modal1".

<div class="guide">
      <p>Hello, this Page has 2 Modals.</p>
      <button class="modal-open" data-popup-trigger="modal1">
        Open Modal 1
      </button>
      <button class="modal-open" data-popup-trigger="modal2">
        Open Modal 2
      </button>
    </div>

    <div class="modal" id="modal1">
      <div class="modal-content">
        <div class="modal-close-button">&#10008;</div>
        <div class="modal-text">Content of the modal 1</div>
      </div>
    </div>

    <div class="modal" id="modal2">
      <div class="modal-content">
        <div class="modal-close-button">&#10008;</div>
        <div class="modal-text">
          <h2>Title of the Modal</h2>
          <br />
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          sollicitudin id ligula quis laoreet. Maecenas felis mi, dictum ac
          condimentum in, bibendum ut diam. Vestibulum iaculis scelerisque velit
          vel convallis. Praesent sodales sollicitudin tortor eu facilisis.
          Aenean in tincidunt sapien, id consequat nisi. Quisque interdum, justo
          at commodo sodales, diam ipsum venenatis odio, id aliquam leo massa
          nec felis. Aliquam in libero est. Ut ultricies eros diam, vitae
          ullamcorper nisl pretium eget. Etiam in gravida sem. Donec nec nisl
          pulvinar ligula hendrerit malesuada.
        </div>
      </div>
    </div>

CSS

Here comes the interesting part that controls the styling and animation of the popup.

The code commented inside general styling is not necessary for modals. It is placed only to style the buttons and page background.

/* General Styling */

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");

body {
  font-family: "Ubuntu", sans-serif;
  background-color: #ff7979;
  font-size: 1.2rem;
  color: #333;
}

button {
  background-color: #333;
  color: #fff;
  font-size: 1.2rem;
  padding: 10px;
  font-weight: 400;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #d5d5d5;
}

.guide {
  text-align: center;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* General Styling Ends */

@keyframes scaleup {
  0% {
    transform: scale(0.2);
  }
  90% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #333;
  background-color: rgba(0, 0, 0, 0.7);
  animation: scaleup 0.2s ease-in;
}

.modal-content {
  position: absolute;
  top: 50%;
  background-color: #f2f2f2;
  border-radius: 5px;
  padding: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.modal-close-button {
  position: absolute;
  background-color: #e74c3c;
  padding: 10px;
  border-radius: 50%;
  color: #fff;
  right: -20px;
  top: -20px;
  cursor: pointer;
}
.modal-close-button:hover {
  transition: all 0.2s;
  padding: 12px;
}

.show-modal {
  display: block;
}

Pure Vanilla Javascript to trigger Popup Modal

The actual logic of the code which controls the modal popup. Vanilla Javascript in this code example is responsible to trigger modal popup by adding show-modal class to the modal.

Here is a step by step explanation of the code.

  • Select all the buttons to open modal popups on the page
  • Iterate through all the buttons to add click event listeners to them
  • Add click event listeners to each button
  • Get the modal popup with id = data-popup-trigger attribute of the button.
  • Toggle show-modal class from the modal popup which will show it.
  • Add event listener to the close button.
 // Get All open-modal buttons on the page
    var modals = document.querySelectorAll(".modal-open");

    modals.forEach((element) => {
      //Add click listeners to open-modal buttons
      element.addEventListener("click", () => {

        //Get the unique popup modal for that button
        var popupModal = document.getElementById(element.dataset.popupTrigger);

        //Select the close button of current popup modal
        var popupModalCloseButton = document
          .getElementById(element.dataset.popupTrigger)
          .getElementsByClassName("modal-close-button")[0];

        // Show/hide modal on click by toggling the class
        popupModal.classList.toggle("show-modal");

        //Add event listener to close button on popup modal.
        popupModalCloseButton.addEventListener("click", () => {
          popupModal.classList.remove("show-modal");
        });

      });
    });

Demo

You can view the complete working demo on Codepen.

Complete Working Code

Just paste the code in any HTML page and view the page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Pure Vanilla JS Popup - Modern UI</title>
    <style>
      /* General Styling */

      @import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");

      body {
        font-family: "Ubuntu", sans-serif;
        background-color: #ff7979;
        font-size: 1.2rem;
        color: #333;
      }

      button {
        background-color: #333;
        color: #fff;
        font-size: 1.2rem;
        padding: 10px;
        font-weight: 400;
        cursor: pointer;
        border-radius: 5px;
        border: 1px solid #d5d5d5;
      }

      .guide {
        text-align: center;
        color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
      }

      /* General Styling Ends */

      @keyframes scaleup {
        0% {
          transform: scale(0.2);
        }
        90% {
          transform: scale(1.2);
        }
        100% {
          transform: scale(1);
        }
      }

      .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: #333;
        background-color: rgba(0, 0, 0, 0.7);
        animation: scaleup 0.2s ease-in;
      }

      .modal-content {
        position: absolute;
        top: 50%;
        background-color: #f2f2f2;
        border-radius: 5px;
        padding: 20px;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }

      .modal-close-button {
        position: absolute;
        background-color: #e74c3c;
        padding: 10px;
        border-radius: 50%;
        color: #fff;
        right: -20px;
        top: -20px;
        cursor: pointer;
      }
      .modal-close-button:hover {
        transition: all 0.2s;
        padding: 12px;
      }

      .show-modal {
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="guide">
      <p>Hello, this Page has 2 Modals.</p>
      <button class="modal-open" data-popup-trigger="modal1">
        Open Modal 1
      </button>
      <button class="modal-open" data-popup-trigger="modal2">
        Open Modal 2
      </button>
    </div>

    <div class="modal" id="modal1">
      <div class="modal-content">
        <div class="modal-close-button">&#10008;</div>
        <div class="modal-text">Content of the modal 1</div>
      </div>
    </div>

    <div class="modal" id="modal2">
      <div class="modal-content">
        <div class="modal-close-button">&#10008;</div>
        <div class="modal-text">
          <h2>Title of the Modal</h2>
          <br />
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          sollicitudin id ligula quis laoreet. Maecenas felis mi, dictum ac
          condimentum in, bibendum ut diam. Vestibulum iaculis scelerisque velit
          vel convallis. Praesent sodales sollicitudin tortor eu facilisis.
          Aenean in tincidunt sapien, id consequat nisi. Quisque interdum, justo
          at commodo sodales, diam ipsum venenatis odio, id aliquam leo massa
          nec felis. Aliquam in libero est. Ut ultricies eros diam, vitae
          ullamcorper nisl pretium eget. Etiam in gravida sem. Donec nec nisl
          pulvinar ligula hendrerit malesuada.
        </div>
      </div>
    </div>
  </body>
  <script>
    // Get All open-modal buttons on the page
    var modals = document.querySelectorAll(".modal-open");

    modals.forEach((element) => {
      //Add click listeners to open-modal buttons
      element.addEventListener("click", () => {
        //Get the unique popup modal for that button
        var popupModal = document.getElementById(element.dataset.popupTrigger);

        //Select the close button of current popup modal
        var popupModalCloseButton = document
          .getElementById(element.dataset.popupTrigger)
          .getElementsByClassName("modal-close-button")[0];

        // Show/hide modal on click by toggling the class
        popupModal.classList.toggle("show-modal");

        //Add event listener to close button on popup modal.
        popupModalCloseButton.addEventListener("click", () => {
          popupModal.classList.remove("show-modal");
        });
      });
    });
  </script>
</html>

If you face any problem with this tutorial, please let us know in the comments.

#Javascript