Create a Responsive & Stylish Modal from Scratch (HTML, CSS & JS)
A modal is a dialog box or popup window that appears on top of the current page. It is used to display additional content or to prompt the user for input.
In this tutorial, we will create a stylish modal using HTML, CSS, and JavaScript.
Step 1: Create the HTML structure
Let's start by creating the HTML structure for the modal. We will create a button and center it on the page. When the button is clicked, our modal will be revealed. Our HTML markup will look as shown 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>Responsive Modal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Button to open the modal -->
<button id="openModal">Open Modal</button>
<!-- The Modal -->
<div id="exampleModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<h2>Modal Header <span class="close">×</span></h2>
</div>
<img src="my-image.jpg" alt="Modal Image">
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<h3>© 2024. All Rights Reserved</h3>
</div>
</div>
</div>
</body>
</html>
Step 2: Add CSS styles
Next, let us add some CSS styles to create the look and feel of the modal. We want our modal to be responsive and to have a cool color scheme.
Using your text editor, create a file and name it style.css. Inside our css file add the following code:
/* Position items at the center of the page */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
overflow-y: scroll;
}
/* The button to open the modal */
button {
padding: 12px 16px;
border-radius: 6px;
color: white;
border: none;
background-color: #6200ee;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto; /* 5% from the top and centered */
padding: 0;
border: 1px solid #888;
max-width: 500px; /* Could be more or less, depending on screen size */
}
img {
width: 100%;
height: 300px;
object-fit: cover;
object-position: top;
}
/* The Close Button */
.close {
color: #fff;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Modal Header */
.modal-header {
padding: 2px 16px;
background-color: #6200ee;
color: white;
}
/* Modal Body */
.modal-body {
padding: 2px 16px;
}
/* Modal Footer */
.modal-footer {
padding: 2px 16px;
background-color: #e9e9e9;
color: black;
text-align: center;
}
@media screen and (max-width:768px) {
.modal-content {
width: 80%;
}
}
If you open your html file in the browser, it will look similar to the screen below. The modal is hidden. You can click the button, but nothing will happen at this point.
Step 3: Add JavaScript code
Finally, let's add some JavaScript code to make the modal functional. This will make it visible when the button is clicked, and hide it when when the close button or screen is clicked
Create a file and name it script.js, then copy the code below into that file.
// Get the modal
const modal = document.getElementById("exampleModal");
// Get the button that opens the modal
const btn = document.getElementById("openModal");
// Get the <span> element that closes the modal
const span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Now if you run your code, and click the "Open Modal" button, our modal will appear. It will look similar to the one below
On a mobile screen, our modal will look as shown below:
Step 4: Customize the design
You can customize the design of the modal by changing the CSS styles. For example, you can change the background color, font size, and border style. You can also add forms, images and other HTML elements to the modal to make it more visually appealing.
That's it! You have successfully created a modal. We hope you found this helpful.