Introduction:
In this tutorial, we’ll walk through how to build a fully functional modal window using HTML, CSS, and JavaScript. Modals are great for displaying pop-up information or user actions without navigating away from the current page. We’ll cover everything from the project structure to setting up the modal, adding event listeners, and customizing styles.
Things You Will Learn:
- Setting up a basic project structure for an HTML, CSS, and JavaScript project
- Creating HTML structure for a modal
- Styling the modal and overlay with CSS
- Using JavaScript to control modal visibility and adding interactive features
- Implementing key and click events to close the modal
Video Tutorial:
Do not forget to subscribe to my YouTube channel where I will be sharing my knowledge and expertise to help you master the basics of web development. From writing your first line of HTML to creating beautiful and responsive web pages with CSS and JavaScript, I have got you covered. So, if you’re ready to take your web development skills to the next level, hit the subscribe button and join me on this exciting journey.
Project Folder Structure:
Let us explore the project folder structure. The project folder consists of 3 files. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements that we have created with CSS. And Finally Javascript adds functionality to our project. The files used are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Modal</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Button To Open The Modal-->
<button id="Opn-modal-btn">Open Modal</button>
<!-- Modal Overlay for dimming background-->
<div id="modal-overlay"></div>
<!-- Modal Structure-->
<div id="modal">
<div class="heading">
<h1>Welcome to custom modal!</h1>
<button id="close-btn-1">X</button>
</div>
<p>
This custom modal is created using HTML, CSS, and JavaScript. The modal
can be opened by clicking the <strong>Open Modal</strong> button and can
be closed using the <strong>X</strong> button, the
<strong>Close</strong> button, or by clicking outside the modal. You can
also press the <strong>Esc</strong> key to close the modal.
</p>
<!-- Close btn in paragraph -->
<button class="close-btn" id="close-btn-2">Close</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
Let’s add some style to the layout. Copy the code provided and include it in your stylesheet.
body {
background-color: #f4f4f4;
font-family: "Poppins", sans-serif;
}
#modal {
width: min(80vw, 500px);
background-color: #ffffff;
padding: 30px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: none;
z-index: 2; /* Above Overlay */
}
#modal-overlay {
position: fixed; /*Full Screen*/
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
/*Semi Transparent Black*/
z-index: 1; /* Below Modal*/
}
.heading {
display: grid;
grid-template-columns: 11fr 1fr;
}
button {
border: none;
color: #ffffff;
}
.heading button {
position: relative;
background-color: #00ba7e;
height: 50px;
width: 50px;
top: 20px;
}
.close-btn {
background-color: #00ba7e;
width: 100%;
padding: 20px;
font-size: 20px;
margin-top: 20px;
}
p {
color: #737c9f;
text-align: justify;
}
#Opn-modal-btn {
background-color: #00ba7e;
width: 300px;
padding: 30px;
font-size: 20px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
//Get DOM elements
let openModalBtn = document.getElementById("Opn-modal-btn");
let modal = document.getElementById("modal");
let modalOverlay = document.getElementById("modal-overlay");
let closeBtn1 = document.getElementById("close-btn-1");
let closeBtn2 = document.getElementById("close-btn-2");
//Open Modal
openModalBtn.addEventListener("click", function () {
modal.style.display = "block";
modalOverlay.style.display = "block";
});
//Close modal
closeBtn1.addEventListener("click", closeModal);
closeBtn2.addEventListener("click", closeModal);
//Function to close modal and overlay
function closeModal() {
modal.style.display = "none";
modalOverlay.style.display = "none";
}
//Close modal with ESC Key
window.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeModal();
}
});
//Close modal is overlay is clicked
modalOverlay.addEventListener("click", closeModal);
Conclusion:
You’ve now built a simple and functional modal window from scratch using HTML, CSS, and JavaScript! This modal is fully interactive with multiple ways to close it, giving users flexibility. For further customization, feel free to experiment with animations, transition effects, or even adding more complex content within the modal.
