Learn how to create a professional-quality popup or modal window from scratch using HTML, CSS, and JavaScript. In this comprehensive tutorial series, you'll master the skills you need to build fully-functional, interactive popups for your web projects. Whether you're a beginner or an experienced developer, you'll find valuable insights and techniques in this series. Don't miss out on this opportunity to take your web development skills to the next level – start learning today!
Source Code:
Markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to Make a Popup</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
<body>
<div class="container">
<button type="submit" class="btn" onclick="openPopup()">Submit</button>
<div class="popup" id="popup">
<img src="img/tick.png" alt="">
<h2>Thank You!</h2>
<p>Your Details has been Succesfully Submitted.Thanks!</p>
<button type="button" onclick="closePopup()">OK</button>
</div>
</div>
</body>
</html>
css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container{
width: 100%;
height: 100vh;
background: linear-gradient(to right, #485563, #29323c);
display: flex;
align-items: center;
justify-content: center;
}
.btn{
padding: 10px 60px;
background: #fff;
border: 0;
outline: none;
cursor: pointer;
font-size: 22px;
font-weight: 500;
border-radius: 10px;
transition: transform 0.2s;
}
.btn:active{
transform: scale(0.95);
}
.popup{
width: 400px;
background: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 30px 60px;
color: #333;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
.open-popup{
visibility: visible;
top: 50%;
transform: translate(-50%, -50%) scale(1);
}
.popup img{
width: 100px;
margin-top: -50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.popup h2{
font-size: 38px;
font-weight: 500;
margin: 30px 0 10px;
}
.popup button{
width: 100%;
margin-top: 50px;
padding: 10px 0;
background-color: #e02189;
color: #fff;
border: 0;
outline: none;
font-size: 18px;
border-radius: 4px;
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
JavaScript
let popup = document.getElementById('popup')
function openPopup(){
popup.classList.add('open-popup')
}
function closePopup(){
popup.classList.remove('open-popup')
}
there are three functions: openPopup(), closePopup(), and an anonymous function that runs when the page loads.
The openPopup() function is used to open a popup element on the page. It does this by adding the class open-popup to the popup element, which is obtained using the getElementById() method.
The closePopup() function is used to close the popup element. It does this by removing the class open-popup from the popup element.
The anonymous function that runs when the page loads is used to attach event listeners to elements on the page. In this case, it is attaching a click event listener to a button with the ID "open-popup-button", and a click event listener to a button with the ID "close-popup-button". When the "open-popup-button" is clicked, the openPopup() function is executed, and when the "close-popup-button" is clicked, the closePopup() function is executed.
🛴 Follow me on:
YouTube: https://bit.ly/3oBQbc0
Facebook: https://bit.ly/3cp2S5W
Instagram{New}: https://bit.ly/3Ihh2EB
Top comments (1)
I read the article rather than watching the video. In the video do you discuss how to keyboard trap the user in the modal? From the code you show I don't see anything making the underlying page inert, but I may be missing something.