Hello Everyone,
Thank you for showing interest in my blog. Before starting the blog,I must tell you that If you want to become master in any of programming language, you must need to create some projects. The more you build projects, the more you'll become master in that. This is what we have been following for the last few weeks.
So today, we are going to build a simple project of pop-up.
Here is the Live Demo of the project :
If you click on Submit, a pop-up will be shown to you as you have noticed these types of pop-ups in most of the websites.
So let's start the coding :
This is our simple HTML file -
<div class="parent">
<div class="child">
<button id="open">Submit</button>
</div>
<div id="popUp">
<div class="icon">
<img src="done.png" alt="done_icon_image">
</div>
<div class="content">
<h2>Thank You !</h2>
<p>Your details has been successfully submitted.</p>
<button id="close">OK</button>
</div>
</div>
</div>
And our CSS File -
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(
180deg,
rgba(135, 41, 212, 1) 0%,
rgba(209, 47, 192, 1) 54%
);
font-family: "Poppins", sans-serif;
}
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.child button {
padding: 20px 55px;
border-radius: 50px;
border: none;
cursor: pointer;
font-size: 15px;
font-weight: bold;
background-color: #fff;
}
#popUp {
width: 400px;
height: 250px;
background-color: rgb(255, 255, 255);
position: absolute;
transform: translateY(-900px);
transition: all 0.3s linear;
}
.icon img {
width: 60px;
margin: 0 auto;
display: block;
margin-top: -30px;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
width: 90%;
margin: 30px auto;
}
.content h2 {
text-align: center;
font-size: 30px;
}
.content p {
margin: 20px 0;
font-weight: bold;
}
.content button {
margin: 20px auto;
width: 90%;
padding: 10px;
background-color: #6fd649;
color: #fff;
border: none;
}
.content button:hover {
background-color: #408a25;
cursor: pointer;
transition: 0.3s;
}
@media (max-width: 500px) {
.content p {
text-align: center;
}
#popUp {
width: 400px;
height: 300px;
background-color: rgb(255, 255, 255);
}
}
Our output will be something like this -
We want a functionality on Submit button click that a pop-up should generate from top of the page as you can clearly show in the above image.
We have moved pop-up div from center to top of the page which is translateY(-900px) and it will back to center only if we click on Submit button
Now, let's have a look at index.js file -
For sake of simplicity, let's assume we have 2 buttons :
Submit Button
Ok Button
Submit Button is on our main page and if we click on it, the second button Ok Button is inside pop-up div.
If we click on Ok Button, it should again goes to its original position. The overall functionality looks like Toggle button.
So we have stored both the buttons in variable btn and oKbtn and add a Click Event Listener on both of them.
var btn = document.getElementById("open");
btn.addEventListener('click', function () {
document.getElementById("popUp").style.transform = "translateY(0)"
})
var oKbtn = document.getElementById("close");
oKbtn.addEventListener('click', function () {
document.getElementById("popUp").style.transform = "translateY(-900px)"
})
Thats it...Our pop-up will work by this logic. The overall functionality looks like a Toggle button.
I hope you must have understood the working of our pop-up div. Some websites automatically show these types of pop-ups after you spend some times on their website or scroll to a particular position and they trigger the pop-up animations. These all can be achieved by our JavaScript.
I’m glad that someone is taking a keen interest in reading this blog. If you have any suggestion/feedback, please let us know, we'll definitely have a look at your suggestions.