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
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
<!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>The modal has two parts
- The overlay (background)
- The modal box (content)
Then: Create the CSS
Example
Formatted code
<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>Live preview
CSS Explained
Example
.modal-overlay {
display: none;
}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();
}
});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.