← Project - To-Do List Project - Form Validation →

JS TutorialLesson #134

Project - Modal Popup

A modal is a popup window that appears on top of the page.

Modal Popup

A modal is a popup window that appears on top of the page.

The project will build a modal that can be closed in three ways:

Click the close button (x)
Click outside the modal
Press the Escape key

Open Modal

Hello!

This is a modal popup.

What You Will Learn

How to show and hide elements
How to use CSS classes with JavaScript
How to handle click and keydown events
How to detect clicks outside an element

First: Create the HTML

First create the HTML page

Add a button with id="openBth"
Add a Modal structure:
Add a div with class="modal-overlay"
Add a div with class="modal-box"
Add a button with id="closeBtn" and class="modal-close"

Example

Example Code

html

Try it Yourself

/* CSS will go here */

## Modal Popup

 Open Modal

     &times;

### Hello!

This is a modal popup.

// JavaScript will go here

The modal has two parts: > The overlay (background) > The modal box (content)

Then: Create the CSS

Example

Example Code

html

Try it Yourself

/* The overlay (background) */

.modal-overlay {

  display: none;

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

}

/* Show the modal */

.modal-overlay.show {

  display: block;

}

/* The modal box */

.modal-box {

  background: white;

  width: 90%;

  max-width: 400px;

  margin: 100px auto;

  padding: 20px;

  border-radius: 10px;

  position: relative;

}

/* Close button */

.modal-close {

  position: absolute;

  right: 12px;

  top: 8px;

  font-size: 24px;

  border: none;

  background: none;

  cursor: pointer;

}

CSS Explained

Hide the modal by default:

Example

Example Code

css

Try it Yourself

.modal-overlay {
  display: none;
}

Show the modal using a class:

Example

Example Code

css

Try it Yourself

.modal-overlay.show {
  display: block;
}

JavaScript will add and remove the show class.

Example

Example Code

javascript

Try it Yourself

function openModal() {

  modal.classList.add("show");

}

function closeModal() {

  modal.classList.remove("show");

}

Then: Create the JavaScript

Example

Example Code

javascript

Try it Yourself

const modal = document.getElementById("modal");

const openBtn = document.getElementById("openBtn");

const closeBtn = document.getElementById("closeBtn");

function openModal() {

  modal.classList.add("show");

}

function closeModal() {

  modal.classList.remove("show");

}

openBtn.addEventListener("click", openModal);

closeBtn.addEventListener("click", closeModal);

/* Close when clicking outside the modal box */

modal.addEventListener("click", function (event) {

  if (event.target === modal) {

    closeModal();

  }

});

/* Close when pressing Escape */

document.addEventListener("keydown", function (event) {

  if (event.key === "Escape") {

    closeModal();

  }

});

JavaScript Explained

Connect the open button to the openModal() function
Connect the open close button to the closeModal() function
Connect clocking outside the modal to the closeModal() function
Connect the open escape key to the closeModal() function

Connect Functions to Buttons

Connect the open button to the openModal() function, with addEventListener().

Connect the close button to the closeModal() function, with addEventListener().

Example

Example Code

javascript

Try it Yourself

openBtn.addEventListener("click", openModal);

closeBtn.addEventListener("click", closeModal);

Connect Function to Clicking Outside.

Check if the click happened on the overlay. Connect it to closeModal():

Example

Example Code

javascript

Try it Yourself

modal.addEventListener("click", function (event) {

  if (event.target === modal) {

    closeModal();

  }

});

event.target === modal means: > The user clicked on the overlay, not inside the modal box.

Connect Function to Escape Key

Listen for "Escape" key presses. Connect it to closeModal():

Example

Example Code

javascript

Try it Yourself

document.addEventListener("keydown", function (event) {

  if (event.key === "Escape") {

    closeModal();

  }

});

Common Mistakes

Modal never closes when clicking outside: Make sure you check event.target === modal.
Escape closes even when modal is hidden: This is OK, but you can add a check to close only if it is open.
Using display: none with animation: If you want fade effects, use opacity instead (bonus challenge).

Bonus Challenges (Level Up)

Add a fade-in / fade-out effect using CSS
Move focus to the modal when it opens (accessibility)
Trap focus inside the modal (advanced)
Close the modal with the Enter key when a button is focused

JavaScript Projects > JavaScript Counter > A counter project with restore and save in localStorage. > JavaScript Event Listener > The counter project using event listener instead of onclick. > JavaScript To-Do List > A do-do list saved in an array in local storage. > JavaScript Modal Popup > A modal popup window that appears on top of the page. > JavaScript Form Validation > An HTML Form with form validation.