How To Create a Modal Popup Box with CSS and JavaScript

How To Create a Modal Popup Box with CSS and JavaScript

In this tutorial, we will be creating a simple modal with CSS and JavaScript. In fact, we will be using the same code and structure that the modal used here on Sabe uses as well for the feedback option at the end of this tutorial.

Introduction

Modal popups are used pretty frequently on the web. Some popular uses of them include driving newsletter signups, displaying notifications/alerts, and handling register and login forms.

Our modal will be generic which means you will be free to use it for whatever purpose you'd like. Here's what they will look like once finished:

The modal before opening.
The modal before opening
The modal after opening.
The modal after opening

You can click here for a live demo of the finished product. Now, let's get started on building this!

HTML Markup

Let's start with the markup for the modal.

	
    <button class="trigger">Click here to trigger the modal!</button>
    <div class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h1>Hello, I am a modal!</h1>
        </div>
    </div>
	

We have three different components here in the markup.

First we have a simple button which, when clicked on, triggers the modal. Then we have the modal's parent container which houses the modal. Finally, we have the content that will go inside the modal, plus a close button.

To keep things simple, the only actual content inside the modal is an h1 tag with some text.

CSS Styles

These are the styles we will apply to make our modal look nice and pretty.

	
    .modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transform: scaleX(1.1) scaleY(1.1);
        transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    }
    .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 1rem 1.5rem;
        width: 24rem;
        border-radius: 0.5rem;
    }
    .close-button {
        float: right;
        width: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        cursor: pointer;
        border-radius: 0.25rem;
        background-color: lightgray;
    }
    .close-button:hover {
        background-color: darkgray;
    }
    .show-modal {
        opacity: 1;
        visibility: visible;
        transform: scaleX(1.0) scaleY(1.0);
        transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
    }
	

The styles here should be pretty simple, but here's a great class on CSS if you need a refresher.

Let's break down what we're doing.

	
    .modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transform: scaleX(1.1) scaleY(1.1);
    }
	

The styles for the modal class makes it so that it creates a semi-transparent dark background color behind the modal when it is active. We stretch it to 100% width and height and set its visibility to hidden so that it doesn't appear.

	
    .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 1rem 1.5rem;
        width: 24rem;
        border-radius: 0.5rem;
    }
	

Then with the modal-content class, we position the actual modal in the center of the screen, with some visual goodies like a border-radius and some padding.

	
    .close-button {
        float: right;
        width: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        cursor: pointer;
        border-radius: 0.25rem;
        background-color: lightgray;
    }
    .close-button:hover {
        background-color: darkgray;
    }
	

To allow us to close the modal in an elegant way, we have a close button that is just a nicely styled X button at the top-right corner of the modal.

	
    .show-modal {
        opacity: 1;
        visibility: visible;
        transform: scaleX(1.0) scaleY(1.0);
        transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
    }
	

Finally, we have our class that handles styling the modal when it is opened.

JavaScript Code

To make our modal popup actually work, we will be using a very tiny amount of pure, vanilla JavaScript.

	
    var modal = document.querySelector(".modal");
    var trigger = document.querySelector(".trigger");
    var closeButton = document.querySelector(".close-button");

    function toggleModal() {
        modal.classList.toggle("show-modal");
    }

    function windowOnClick(event) {
        if (event.target === modal) {
            toggleModal();
        }
    }

    trigger.addEventListener("click", toggleModal);
    closeButton.addEventListener("click", toggleModal);
    window.addEventListener("click", windowOnClick);
	

We set three click listeners here:

  • When the trigger is clicked, we want to show the modal.
  • When the close button is clicked, we want to hide the modal.
  • When the dark background is clicked, we want to also hide the modal.

Great! Now if we were to press the trigger or the close button, the modal should smoothly animate between the states. It's all about the pretty animations. ๐Ÿ˜

Again, you can click here for alive demo of what we created.

Conclusion

Modal boxes are universally popular and now you have a clear implementation to use for yourself. I hope this tutorial has been useful to you and have fun coming up with interesting use cases for them!

Thumbs up!
Thumbs up!

If you learned from this tutorial, sharing it would mean a lot! ๐Ÿ˜Š Also, don't miss out on future content by subscribing to our newsletter!