In this article, we will explore Create a Modal in HTML CSS and JavaScript. A modal is a useful user interface element that pops up over the content, providing additional information or requiring user input.
We will guide you step-by-step through the process of building this modal from scratch without any codes, making it easier for beginners to understand. So, let’s dive in and learn how to create a functional and attractive modal for your website!
Before we jump into the technical aspects, let’s get familiar with the concept of a modal. A modal is like a floating container that appears on top of a web page, dimming the background and drawing attention to its content.
It is commonly used for displaying images, videos, forms, or any additional information that needs user attention without navigating away from the current page.
Create a Modal in HTML CSS and JavaScript
To begin, we need to set up the foundation for our modal. Using HTML, we will create the necessary structure. Imagine a simple webpage containing a button that, when clicked, will trigger the modal to appear.
With the basic structure in place, we’ll now move on to the next step: applying styles with CSS. CSS allows us to add visual appeal and create an engaging user interface. We’ll cover styling the modal container, dimming the background, and designing the close button.
Now that our modal looks attractive, it’s time to make it functional. JavaScript will bring life to our modal by adding interactivity. We’ll learn how to use JavaScript to control the modal’s appearance and disappearance, create animations, and handle user interactions.
I’ve shared the complete video, you can watch it. After that, you will learn able to understand everything as you need, but if you face any issues with the codes, you can check out my source codes below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal / Popup in JavaScript</title>
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
After creating a basic structure of HTML, then you create a modal structure inside the HTML document. I’ve used simple codes that display the image, input box, and also button.
<button type="button" class="show-modal">Show Modal</button>
<div class="container">
<div class="wrapper">
<div class="top-content">
<img src="images/man.png" alt="" />
<i class="fa fa-close"></i>
</div>
<div class="card-header">
<h2>Subscribe our News Letter !</h2>
<p>Subscribe our news letter and stay updates.</p>
</div>
<div class="card-body">
<form action="#">
<input type="email" placeholder="Enter an Email" />
</form>
</div>
<div class="card-footer">
<button type="submit">Signup</button>
</div>
</div>
</div>
<div class="overlay hidden"></div>Once you are done let’s move to CSS to design each element that contains inside the HTML documents.
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body {
background: url("../images/bg4.jpg") no-repeat center center/cover;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.wrapper {
width: 500px;
background: #fff;
box-shadow: 15px 3px 15px rgba(0, 0, 0, 0.5);
border-radius: 10px;
position: relative;
border-top: 4px solid #3c6be7;
transform: translateY(-180%);
transition: all 0.4s ease-in;
}
.show-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
outline: none;
border: none;
padding: 1rem 2.5rem;
font-size: 1.2rem;
cursor: pointer;
border-radius: 5px;
background: #3c6be7;
color: #fff;
}
.top-content {
display: flex;
}
.top-content i {
cursor: pointer;
position: absolute;
right: 20px;
top: 10px;
font-size: 1.5rem;
}
.wrapper img {
width: 20%;
object-fit: cover;
display: block;
margin: auto;
transform: translateY(-50%);
}
.card-header {
margin-top: -10px;
}
.card-header h2 {
background: #3c6be7;
color: #fff;
text-align: center;
padding: 1rem 0;
margin-bottom: 1rem;
box-shadow: 15px 3px 15px rgba(0, 0, 0, 0.5);
}
.card-header p {
font-size: 1.2rem;
text-align: center;
}
.card-body,
.card-footer {
padding: 0 0.8rem;
}
.card-body form input {
width: 100%;
padding: 1rem 1rem;
margin: 1.5rem 0;
font-size: 1rem;
border-radius: 5px;
outline: none;
border: 1px solid #ddd;
transition: all 0.2s ease-in;
}
.card-body form input:focus {
border: 1px solid #000;
}
.card-footer button {
outline: none;
border: 1px solid #3c6be7;
padding: 0.6rem 1.8rem;
font-size: 0.9rem;
cursor: pointer;
border-radius: 5px;
background: none;
margin-bottom: 2rem;
transition: all 0.3s ease-in-out;
}
.card-footer button:hover {
background: #3c6be7;
color: #fff;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
z-index: -10;
}
.hidden {
display: none;
}
After that, you need to use JavaScript to display and hide the modal by clicking the button.
const showModalBtn = document.querySelector(".show-modal");
const closeBtn = document.querySelector(".fa-close");
const showModal = document.querySelector(".wrapper");
const overlay = document.querySelector(".overlay");
const showModalFun = function () {
overlay.classList.remove("hidden");
showModal.classList.add("show");
};
const closeModal = function () {
overlay.classList.add("hidden");
showModal.classList.remove("show");
};
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
if (!showModal.classList.contains("hidden")) {
closeModal();
}
}
});
showModalBtn.addEventListener("click", showModalFun);
closeBtn.addEventListener("click", closeModal);
finally, you need to use show class to display the modal, you need to add some CSS when the show class is activated.
.wrapper.show {
transform: translateY(0%);
transition: all 0.4s ease-in;
}A smooth animation enhances the user experience. We’ll guide you through creating a simple fade-in and fade-out animation for our modal using CSS transitions and JavaScript.
In the modern world of web development, responsive design is essential. We’ll ensure that our modal works seamlessly on various devices, such as desktops, tablets, and mobile phones, by making it responsive.
You May Also Like:
- Create an Accordion Using HTML, CSS, and JavaScript
- Form Validation in JavaScript
- Show and Hide Password in JavaScript
- How to Create a Coming Soon Website in HTML CSS and JavaScript
- How to Make Password Generator in JavaScript
Building an accessible website is crucial to ensure inclusivity for all users, including those with disabilities. We will show you how to make our modal accessible by using ARIA attributes and following best practices.
No development process is complete without testing and debugging. We’ll explore various testing techniques and common issues that might arise during the development of the modal, along with their solutions.
Conclusion:
Congratulations! By following this step-by-step guide, you have successfully built an interactive modal using HTML, CSS, and JavaScript. This modal is not only visually appealing but also functional and accessible to all users. You have now acquired valuable knowledge of web development fundamentals, allowing you to create more engaging and user-friendly web interfaces in your future projects.
Happy Coding!
