Loading lesson path

Learn/JavaScript/Debugging, Projects, and Reference

JavaScript•Debugging, Projects, and Reference

Project - Modal Popup

Concept visual

Project - Modal Popup

Pointer walk

two pointers

left=0

right=6

Start at both ends

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:

Formula

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

<!DOCTYPE html> <html> <style> /* CSS will go here */ </style> <body>

Formula

< h2 > Modal Popup </h2 >

<button id="openBtn">Open Modal</button>

Formula

< div id ="modal" class ="modal - overlay">
< div class ="modal - box">
< button id ="closeBtn" class ="modal - close">×</button >
< h3 > Hello!</h3 >
< p > This is a modal popup.</p >

</div> </div> <script> // JavaScript will go here </script> </body> </html>

The modal has two parts:

The overlay (background) The modal box (content)

Then: Create the CSS

Example

<style>

/* 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;
}

</style>

CSS Explained

Hide the modal by default:

Example.modal-overlay {
display: none;
}

Show the modal using a class:

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

JavaScript will add and remove the show class.

Example function openModal() {
modal.classList.add("show");
}
function closeModal() {
modal.classList.remove("show");
}

Then: Create the JavaScript

Example

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 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 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

document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeModal();
}
});

JavaScript Operator Precedence

ECMAScript 2023

Loading lesson path

Learn/JavaScript/Debugging, Projects, and Reference

JavaScript•Debugging, Projects, and Reference

Project - Modal Popup

Concept visual

Project - Modal Popup

Pointer walk

two pointers

left=0

right=6

Start at both ends

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:

Formula

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

<!DOCTYPE html> <html> <style> /* CSS will go here */ </style> <body>

Formula

< h2 > Modal Popup </h2 >

<button id="openBtn">Open Modal</button>

Formula

< div id ="modal" class ="modal - overlay">
< div class ="modal - box">
< button id ="closeBtn" class ="modal - close">×</button >
< h3 > Hello!</h3 >
< p > This is a modal popup.</p >

</div> </div> <script> // JavaScript will go here </script> </body> </html>

The modal has two parts:

The overlay (background) The modal box (content)

Then: Create the CSS

Example

<style>

/* 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;
}

</style>

CSS Explained

Hide the modal by default:

Example.modal-overlay {
display: none;
}

Show the modal using a class:

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

JavaScript will add and remove the show class.

Example function openModal() {
modal.classList.add("show");
}
function closeModal() {
modal.classList.remove("show");
}

Then: Create the JavaScript

Example

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 Functions to Buttons

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

Example 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 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

document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeModal();
}
});

JavaScript Operator Precedence

ECMAScript 2023