Project - Modal Popup
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
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
<!DOCTYPE html>
<html>
<style>
/* CSS will go here */
</style>
<body>
<h2>Modal Popup</h2>
<button id="openBtn">Open Modal</button>
<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>
Note
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>
Try it Yourself »
CSS Explained
Hide the modal by default:
Example
.modal-overlay {
display: none;
}
Show the modal using a class:
Example
.modal-overlay.show {
display: block;
}
Note
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();
}
});
Try it Yourself »
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();
}
});
Note
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();
}
});
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 lovalStorage. - JavaScript Event Listener
The counter project using event listener instead of onclick. - JavaScript Do-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.
