Modal Tutorial - Using CSS, Html and JavaScript

Modal Tutorial - Using CSS, Html 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 Modal Tutorial - Using CSS and JavaScript. 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 after opening.

You can view a live demo of the finished product before continuing on. 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 to open. 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: scale(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: scale(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: scale(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: scale(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.

All you need to do is give the modal the show-modal class to open it. Removing this class will reset it back to hidden. JavaScript will handle this toggling for us.

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 a live demo of what we created, or use the editor below!

Further reading:

Javascript Objects Tutorial Example

Introduction To Promised-based Data Fetching In JavaScript

Beginners Guide to Tagged Template Literals in JavaScript

How to Jest Snapshot Test the Difference

Laravel 5.8 Tutorial - Datatables Dropdown Filter Server-side using Ajax

Top 8 VS Code Extensions Every Javascript Developer Must Know and Use

JavaScript Promises Tutorial with Examples

javascript css3 html5 html

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch, you'll learn the fundamentals of HTML5 & CSS3 programming. Tune in to learn concepts about web pages, CSS3 styles and HTML5 features.

HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]

Website header text made out entirely of interactive bubble particles? Why not :) In today's HTML5 canvas text animation tutorial we will build it together using nothing but plain HTML, CSS and pure vanilla JavaScript. No frameworks and no libraries. Let's improve our understanding of these 3 fundamental web development technologies and create something cool in the process. HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]

Carousel de Películas Estilo NETFLIX con HTML5, CSS3 y Javascript

Carousel de Películas Estilo NETFLIX con HTML5, CSS3 y Javascript. Continuamos con nuestra practica diseñando una pagina estilo Netflix, ahora crearemos un carrusel de imágenes desde cero.