How to Make Custom Popup Modal in HTML, CSS, and jQuery
A modal is a popup window that is displayed over the other components of the page forcing the user to interact with it before continuing to interact with the rest of the page.
Though it is considered by many as annoying in most instances, a modal is an effective way of capturing the user's attention.
It has a wide array of uses and can be used to show additional information such as notifications and warnings or consist of forms such as feedback, contact, or subscription form.
A modal usually comprises a dark semi-transparent overlay known as the backdrop that dims the entire page and a horizontally centered box with a bright background with the content that the user is expected to view or interact with.
It usually has a "close" button (typically positioned at the top-right corner) which when clicked closes the modal.
In some cases, clicking on the backdrop also closes the popup modal.
The opening of the modal can be triggered by the user performing an event such as clicking a button, or can happen automatically without user intervention.
Modals are often created using the modal component of popular front-end frameworks such as Bootstrap. But you can as well make your own custom modals from scratch without a framework.
In this article, I will show you how to make your own custom modal using HTML, CSS, and jQuery library.
Creating a Custom Modal in HTML, CSS, and jQuery
In this tutorial, we will create a popup modal that comprises the following:
- A trigger button that will open the modal upon clicking.
- The actual modal with custom content or elements.
- A "close" button in the popup modal that will close the modal.
We will also cover how to enable the closing of the modal by clicking on the backdrop area.
Follow the steps below:
1. Import the jQuery library
We will need to have jQuery on the page for adding the functionalities of opening and closing the modal.
So you first need to import it to the page. You can download it and host it locally in your project files storage or load it directly from the CDN (Content Delivery Network).
Place the import code within the <head> section of your page or before the closing </body> tag.
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
2. HTML Structure
Next, we will need to create the HTML structure of the modal. That's the trigger button and the actual modal.
<!-- Modal trigger button -->
<button type="button" id="popup-trigger">Launch Modal</button>
<!-- Popup Modal -->
<div id="popup-modal">
<div id="modal-content" class="slidedown">
<h3 class="modal-title">Lorem Ipsum</h3>
<button type="button" class="close">x</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<p>Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
In the above code, we have created a <button> element with the ID "popup-trigger" which will be used to open the modal upon clicking.
The <div> element with the ID "popup-modal" will comprise the backdrop area. It will create a dark overlay that will cover the entire page and steal the focus (dim) of the other page components.
Then we have a child <div> element with the ID "modal-content" which is the actual modal window with a bright background and horizontally centered on the page. Inside it is the modal content which can comprise different HTML elements such as divs, headings, paragraphs, forms, etc.
Lastly, inside the modal content div is a <button> with a class name "close" which will trigger the closing of the modal on clicking.
3. CSS Styling
Now that we have all the required modal HTML elements, the next step is to do the styling with CSS.
Styling the trigger button
#popup-trigger{
background-color: green;
color: #fff;
font-size: 15px;
padding: 6px 10px;
border-radius: 4px;
border: none;
cursor: pointer;
}
In the above code, we have used the ID of the trigger button to target it for CSS styling. We have given it a green background, with rounded corners and padding around the text, a white text color, and a pointer cursor.
Styling the backdrop
#popup-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
display: none;
}
The above code sets the backdrop area to a fixed position covering the entire browser viewport from the top-left to the bottom-right corner and with a dark semi-transparent background. We have also set its z-index value to 1 to position it over the other page components and hidden it by default.
Styling the popup modal
#modal-content {
margin: 5% auto;
width: 500px;
max-width: 90%;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.175);
border-radius: 5px;
padding: 0 15px;
}
.slidedown{
position:relative;
animation:slidedown 0.5s
}
@keyframes slidedown{
from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
The popup modal <div> element has an ID "modal-content" and class name "slidedown". We have used its ID to design it and its class to animate it when opening.
We have positioned it to display 5% from the top of the page, horizontally centered, and to a width of 500 pixels. We have also set it to have a maximum width of 90% of the page width in case of smaller screens less than 500 pixels.
We have also given it a white background color, left and right padding of 15 pixels around the content, and a rounded solid border of 1-pixel width.
Using its class and keyframes, we have given the modal an animation that when opening will appear to be sliding down from the top of the page before stopping at 5% position from the top. This is not a requirement but it makes it cool.
Styling the close button
.close {
position: absolute;
top: 5px;
right: 5px;
color: #454534;
font-size: 25px;
font-weight: 600;
cursor: pointer;
background-color: transparent;
border: none;
}
We have positioned the close button absolutely 5 pixels from the top and 5 pixels from the right of the modal (top-right corner). We have also given it a dark color, a large font size, a transparent background, and a pointer cursor.
4. jQuery functionality
At this point, we have everything in place. All that is remaining is the functionality to show the popup modal on clicking the trigger button and dismissing it upon clicking the close button. That we will implement using jQuery code.
Showing the modal
$("#popup-trigger").click(function() {
$("#popup-modal").show();
});
In the above code, we use the ID to target the trigger button and the click() function to handle the click event. When this button is clicked, we target the backdrop div using its ID and the show() function to show it.
Hiding the modal
$(".close").click(function() {
$("#popup-modal").fadeOut();
});
In the above code, we have used the class of the close button to target it and the click() function to handle its click event. Upon the button click, we target the backdrop div using its ID and the fadeOut() function to hide it from view, apparently dismissing it.
With the above jQuery code alone, the modal will close on clicking the close button but clicking on the backdrop area (outside of the modal) will have no impact. If you wish to add the functionality of closing the modal by clicking on the backdrop, then you will need to add the code below.
$("#popup-modal").click(function () {
$("#popup-modal").fadeOut();
}).children().click(function () {
return false;
});
Click the button below to test the modal that we have just created.
Summing up
Now that we have covered all the aspects of HTML, CSS, and jQuery code step-by-step in small pieces, it is time to put it all together.
Below is the complete code for a page with a custom popup modal:
<!DOCTYPE html>
<html>
<head>
<title>Creating a Custom Modal</title>
<style>
#popup-trigger{
background-color: green;
color: #fff;
font-size: 15px;
padding: 6px 10px;
border-radius: 4px;
border: none;
cursor: pointer;
}
#popup-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
display: none;
}
#modal-content {
margin: 5% auto;
width: 500px;
max-width: 90%;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.175);
border-radius: 5px;
padding: 0 15px;
}
.close {
position: absolute;
top: 5px;
right: 5px;
color: #454534;
font-size: 25px;
font-weight: 600;
cursor: pointer;
background-color: transparent;
border: none;
}
.slidedown{
position:relative;
animation:slidedown 0.5s
}
@keyframes slidedown{
from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
</style>
</head>
<body>
<!-- Modal trigger button -->
<button type="button" id="popup-trigger">Launch Modal</button>
<!-- Popup Modal -->
<div id="popup-modal">
<div id="modal-content" class="slidedown">
<h3 class="modal-title">Lorem Ipsum</h3>
<button type="button" class="close">x</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<p>Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
$(function() {
$("#popup-trigger").click(function() {
$('#popup-modal').show();
});
$(".close").click(function() {
$("#popup-modal").fadeOut();
});
$("#popup-modal").click(function () {
$("#popup-modal").fadeOut();
}).children().click(function () {
return false;
});
});
</script>
</body>
</html>
That's it!
Now you know how to make your own custom popup modals using HTML, CSS, and jQuery. Feel free to copy the above code and play around with it.
Customize it with your own CSS styling, different jQuery functions (eg fadeIn(), slideDown(), slideUp(), hide(), etc) and functionalities, and modal contents until you are satisfied with the result.
Happy coding.
