DEV Community

Robson Muniz
Robson Muniz

Posted on

📫How To Make A Popup | HTML, CSS & JavaScript

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

JavaScript

let popup = document.getElementById('popup')

function openPopup(){
  popup.classList.add('open-popup')
}

function closePopup(){
  popup.classList.remove('open-popup')
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
rouilj profile image
John P. Rouillard

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.