Popup Using HTML CSS and JavaScript

Hey, developers welcome to Day 11 of our 90Days 90Projects challenge. And in Day 11 we are going to create a popup using HTML CSS and JavaScript which opens the popup menu when a user click on button.

So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

HTML Code

index.html

<!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> Popup Menu </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="mainContainer">
        <button class="btn" id="submit"> Submit </button>
        <div class="popupContainer" id="popupMenu">
            <img id="image" src="./thankyou.webp" alt="">
            <h2> Thank You!</h2>
            <p> Thank you sir! Your form has been successfully submitted </p>
            <button id="close"> ok </button>
        </div>
    </div>
</body>
<script src="script.js"></script>
</html>



CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: rgb(33, 31, 31);
}

.mainContainer {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.btn {
    outline: none;
    border: none;
    background-color: rgb(12, 252, 24);
    color: black;
    font-size: 20px;
    padding: 1rem 4rem;
    border-radius: 2rem;
    cursor: pointer;
}

.btn:hover {
    background-color: rgb(32, 236, 42);

}

.popupContainer {
    position: absolute;
    top: -10%;
    width: 20rem;
    transform: scale(0.1);
    border-radius: 1rem;
    background-color: #fff;
    visibility: hidden;
    padding: 1rem;
    transition: all .4s linear;
}

.popupActive {
    top: 30%;
    visibility: visible;
    transform: scale(1.1);
}

.popupContainer h2,
p {
    text-align: center;
}

#close {
    width: 100%;
    font-size: 1.2rem;
    margin-top: 1rem;
    padding: .6rem;
    border-radius: 2rem;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    color: rgb(77, 0, 0);

    background-color: rgb(245, 73, 73);
}

#close:hover {
    color: rgb(245, 73, 73);
    background-color: rgb(234, 183, 183);

}

#image {
    width: 5rem;
    margin: 0 auto;
    display: block;
    position: relative;
    top: -4rem;
    background-color: rgb(236, 225, 66);
    border-radius: 50%;
}

JavaScript

script.js

const submitBtn = document.getElementById('submit')
const closeBtn = document.getElementById('close')
const popup = document.querySelector('.popupContainer')

submitBtn.addEventListener('click', function () {
    popup.classList.add('popupActive')

})
closeBtn.addEventListener('click', function () {
    popup.classList.remove('popupActive')

})


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

6 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. there is an error you didn't taken any class named popupActive but you have used it in css

    ReplyDelete
  2. It didnt show the Thanks text.

    ReplyDelete

Top Post Ad

Below Post Ad