Hello developers, today in this blog, you'll learn how to create a Popup Modal Box using HTML, CSS & JavaScript.
A Popup Modal Box is a box that pops while viewing the main page of the website. The use of Popup Modal Box is to share the webpage which will be useful for the people with whom you share.
In this Popup Modal Box, there is a title named the share this article with some content to share this article and a thank you message. There are also social media buttons like Facebook, Twitter, and Reddit to share this article. At the bottom of the card, there is a text called Close the Window, if you click on that text the Popup Modal Box gets closed and there is also a close icon at the right top corner of the Modal Box. The JavaScript code is mainly used to close the Popup Modal Box.
The source code of this Popup Modal Box using HTML, CSS & JavaScript is given below, if you want the source code of this program, you can copy it. You can use this Popup Modal Box code on your projects.
Popup Modal Box using HTML, CSS & JavaScript [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #333;
}
body {
font-family: "Roboto", sans-serif;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
width: 600px;
height: 400px;
background-color: #202124;
border-radius: 10px;
padding: 1rem 2rem;
text-align: center;
box-shadow: 0px 4px 20px rgba(0,0,0,0.4);
animation: anim 2s 2s backwards;
transition: opacity 2s;
color:#fff
}
#close-btn {
display: block;
text-align: right;
font-size: 2.5rem;
color: #888;
font-weight: lighter;
}
.card-body {
padding: 0 3rem;
}
.header h2 {
margin-bottom: 1rem;
}
.header p {
font-weight: 300;
}
.header {
margin-bottom: 3rem;
}
.social-icons {
display: flex;
justify-content: space-around;
}
.social-icons a {
color: white;
width: 150px;
margin: 1rem;
padding: 0.5rem;
border-radius: 5px;
}
.facebook {
background: #405896;
}
.twitter {
background: #1da1f2;
}
.reddit {
background: #000;
}
.shares{
margin:2rem 0;
}
.shares span{
font-weight: 800;
}
.close-link{
color:orange;
}
.close{
opacity: 0;
}
@keyframes anim {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.credit{
text-align: center;
color: #fff;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#FBAB7E;
font-weight: bold;
}
let closeBtn = document.querySelector('#close-btn');
let card = document.querySelector('.card');
let closeLink = document.querySelector('.close-link');
closeBtn.addEventListener('click', ()=>{0
card.classList.add('close');
})
closeLink.addEventListener('click', ()=>{
card.classList.add('close');
})
Thank you for reading our blog. If you face any problem in creating this Popup Modal Box using HTML, CSS & JavaScript then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team