Vanilla Javascript Popup - Modern Animated UI
Summary:Modals are very helpful to display important information to the users. Here is a quick guide to creating popup modal using pure vanilla javascript.
Modal popups are very useful in displaying useful information to the visitors. They are also one most popular ways to grab users attention. Here in this post, you can learn how to code your own modal popup in vanilla javascript.
Modals popups are widely used to:
- Display messages
- Collecting email's for newsletter
- Inform users about sale and offers.
- Cookie Notification
- Warning or Danger
How to create Modal Popup with Vanilla Javascript and CSS
Here I have explained the code to create modal in vanilla javascript. It has three main parts.
- HTML Code
- CSS Code
- Vanilla Javascript Code
I have explained each in detailed sections. In the last, you can find the demo link and complete code.
HTML
There is nothing much to explain in the HTML code.
But do note that data-popup-trigger
of the buttons must be same as id
of the modal which it needs to trigger.
For example:
In the code below button 1 has data-popup-trigger
value modal1
so it will trigger modal with id="modal1"
.
<div class="guide">
<p>Hello, this Page has 2 Modals.</p>
<button class="modal-open" data-popup-trigger="modal1">
Open Modal 1
</button>
<button class="modal-open" data-popup-trigger="modal2">
Open Modal 2
</button>
</div>
<div class="modal" id="modal1">
<div class="modal-content">
<div class="modal-close-button">✘</div>
<div class="modal-text">Content of the modal 1</div>
</div>
</div>
<div class="modal" id="modal2">
<div class="modal-content">
<div class="modal-close-button">✘</div>
<div class="modal-text">
<h2>Title of the Modal</h2>
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
sollicitudin id ligula quis laoreet. Maecenas felis mi, dictum ac
condimentum in, bibendum ut diam. Vestibulum iaculis scelerisque velit
vel convallis. Praesent sodales sollicitudin tortor eu facilisis.
Aenean in tincidunt sapien, id consequat nisi. Quisque interdum, justo
at commodo sodales, diam ipsum venenatis odio, id aliquam leo massa
nec felis. Aliquam in libero est. Ut ultricies eros diam, vitae
ullamcorper nisl pretium eget. Etiam in gravida sem. Donec nec nisl
pulvinar ligula hendrerit malesuada.
</div>
</div>
</div>
CSS
Here comes the interesting part that controls the styling and animation of the popup.
The code commented inside general styling is not necessary for modals. It is placed only to style the buttons and page background.
/* General Styling */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
body {
font-family: "Ubuntu", sans-serif;
background-color: #ff7979;
font-size: 1.2rem;
color: #333;
}
button {
background-color: #333;
color: #fff;
font-size: 1.2rem;
padding: 10px;
font-weight: 400;
cursor: pointer;
border-radius: 5px;
border: 1px solid #d5d5d5;
}
.guide {
text-align: center;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
/* General Styling Ends */
@keyframes scaleup {
0% {
transform: scale(0.2);
}
90% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #333;
background-color: rgba(0, 0, 0, 0.7);
animation: scaleup 0.2s ease-in;
}
.modal-content {
position: absolute;
top: 50%;
background-color: #f2f2f2;
border-radius: 5px;
padding: 20px;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.modal-close-button {
position: absolute;
background-color: #e74c3c;
padding: 10px;
border-radius: 50%;
color: #fff;
right: -20px;
top: -20px;
cursor: pointer;
}
.modal-close-button:hover {
transition: all 0.2s;
padding: 12px;
}
.show-modal {
display: block;
}
Pure Vanilla Javascript to trigger Popup Modal
The actual logic of the code which controls the modal popup. Vanilla Javascript in this code example is responsible to trigger modal popup by adding show-modal
class to the modal.
Here is a step by step explanation of the code.
- Select all the buttons to open modal popups on the page
- Iterate through all the buttons to add click event listeners to them
- Add click event listeners to each button
- Get the modal popup with
id = data-popup-trigger attribute of the button
. - Toggle
show-modal
class from the modal popup which will show it. - Add event listener to the close button.
// Get All open-modal buttons on the page
var modals = document.querySelectorAll(".modal-open");
modals.forEach((element) => {
//Add click listeners to open-modal buttons
element.addEventListener("click", () => {
//Get the unique popup modal for that button
var popupModal = document.getElementById(element.dataset.popupTrigger);
//Select the close button of current popup modal
var popupModalCloseButton = document
.getElementById(element.dataset.popupTrigger)
.getElementsByClassName("modal-close-button")[0];
// Show/hide modal on click by toggling the class
popupModal.classList.toggle("show-modal");
//Add event listener to close button on popup modal.
popupModalCloseButton.addEventListener("click", () => {
popupModal.classList.remove("show-modal");
});
});
});
Demo
You can view the complete working demo on Codepen.
Complete Working Code
Just paste the code in any HTML page and view the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Pure Vanilla JS Popup - Modern UI</title>
<style>
/* General Styling */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
body {
font-family: "Ubuntu", sans-serif;
background-color: #ff7979;
font-size: 1.2rem;
color: #333;
}
button {
background-color: #333;
color: #fff;
font-size: 1.2rem;
padding: 10px;
font-weight: 400;
cursor: pointer;
border-radius: 5px;
border: 1px solid #d5d5d5;
}
.guide {
text-align: center;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
/* General Styling Ends */
@keyframes scaleup {
0% {
transform: scale(0.2);
}
90% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #333;
background-color: rgba(0, 0, 0, 0.7);
animation: scaleup 0.2s ease-in;
}
.modal-content {
position: absolute;
top: 50%;
background-color: #f2f2f2;
border-radius: 5px;
padding: 20px;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.modal-close-button {
position: absolute;
background-color: #e74c3c;
padding: 10px;
border-radius: 50%;
color: #fff;
right: -20px;
top: -20px;
cursor: pointer;
}
.modal-close-button:hover {
transition: all 0.2s;
padding: 12px;
}
.show-modal {
display: block;
}
</style>
</head>
<body>
<div class="guide">
<p>Hello, this Page has 2 Modals.</p>
<button class="modal-open" data-popup-trigger="modal1">
Open Modal 1
</button>
<button class="modal-open" data-popup-trigger="modal2">
Open Modal 2
</button>
</div>
<div class="modal" id="modal1">
<div class="modal-content">
<div class="modal-close-button">✘</div>
<div class="modal-text">Content of the modal 1</div>
</div>
</div>
<div class="modal" id="modal2">
<div class="modal-content">
<div class="modal-close-button">✘</div>
<div class="modal-text">
<h2>Title of the Modal</h2>
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
sollicitudin id ligula quis laoreet. Maecenas felis mi, dictum ac
condimentum in, bibendum ut diam. Vestibulum iaculis scelerisque velit
vel convallis. Praesent sodales sollicitudin tortor eu facilisis.
Aenean in tincidunt sapien, id consequat nisi. Quisque interdum, justo
at commodo sodales, diam ipsum venenatis odio, id aliquam leo massa
nec felis. Aliquam in libero est. Ut ultricies eros diam, vitae
ullamcorper nisl pretium eget. Etiam in gravida sem. Donec nec nisl
pulvinar ligula hendrerit malesuada.
</div>
</div>
</div>
</body>
<script>
// Get All open-modal buttons on the page
var modals = document.querySelectorAll(".modal-open");
modals.forEach((element) => {
//Add click listeners to open-modal buttons
element.addEventListener("click", () => {
//Get the unique popup modal for that button
var popupModal = document.getElementById(element.dataset.popupTrigger);
//Select the close button of current popup modal
var popupModalCloseButton = document
.getElementById(element.dataset.popupTrigger)
.getElementsByClassName("modal-close-button")[0];
// Show/hide modal on click by toggling the class
popupModal.classList.toggle("show-modal");
//Add event listener to close button on popup modal.
popupModalCloseButton.addEventListener("click", () => {
popupModal.classList.remove("show-modal");
});
});
});
</script>
</html>
If you face any problem with this tutorial, please let us know in the comments.
Join Our Youtube Channel
Subscribe