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')
})
Hello
ReplyDeleteHey tell me how I can help you?
Deletethere is an error you didn't taken any class named popupActive but you have used it in css
ReplyDeletecheck js code I have written in script.js
DeleteHello
ReplyDeleteIt didnt show the Thanks text.
ReplyDelete