Nice-looking popups with vanilla JavaScript

September 2019

As frontend developers, we often need to display popups to our end users. There are a few existing popup libraries, but they can be a little opinionated and heavy when it comes to styling and functionality. If you’re just looking for a quick and easy starting point (and don’t mind defining the popup via HTML), this post will help.

Here’s what we’ll be creating:

JavaScript

First, let’s define a function to toggle the popup. If you plan on having multiple popups, you can easily make this a reusable function by adding an id parameter. But to keep this example simple, we’ll just assume that you have one popup on the page with the id foobar.

function togglePopup() {
  
  // Show or hide the popup.
  const popup = document.getElementById("foobar");

  if (popup.classList.contains("popup-closed")) {
    popup.classList.remove("popup-closed");
  } else {
    popup.classList.add("popup-closed");
  }

  // Stop the event from bubbling up.
  window.event.stopPropagation();

}

HTML

This is the HTML required to make your popup. If you want it to be open by default, remove the popup-closed class. If you change id="foobar", make sure to also change foobar in your JavaScript too.

<!-- Click this button to open the popup -->
<button onclick="togglePopup()">Open popup?</button>

<!-- The popup (background) -->
<div class="popup-container popup-closed" id="foobar" onclick="togglePopup()">

  <!-- The popup (contents) -->
  <div class="popup" onclick="event.stopPropagation();">
    Add contents to your popup here.
  </div>

  <!-- 
    "X" icon in upper right corner; designed by Steve Schoger
    under Creative Commons: zondicons.com
  -->
  <div class="popup-close" onclick="togglePopup()">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
  </div>
</div>

CSS

Now, let’s style the popup. The really important part here is the popup-closed class, which works alongside our JavaScript and HTML to hide the popup. The other parts help to position the popup and make it look nice on mobile.

.popup-container {  
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 12px;
}

/* Give the popup a background and some padding */
.popup {
  max-width: 600px;
  width: 100%;
  background: #fff;
  border-radius: $radius;
  overflow: hidden;
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.1);
  max-height: 90vh;
  overflow: auto;
  padding: 24px;
  border-radius: 6px;
}

/* Style the X that closes the popup */
.popup-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 24px;
  display: block;
  cursor: pointer;
}

.popup-close svg {
  fill: #ccc;
  width: 36px;
  height: 36px;
}

.popup-close:hover svg {
  fill: #fff;
}

/* Hide closed popups */
.popup-closed {
  display: none;
}

There you have it: a simple way to make nice-looking popups in nothing but some HTML, CSS, and vanilla JavaScript. And if you have special requirements, this example was minimalistic enough that you can easily edit the code to suit your needs.