Popup Modal Box using HTML, CSS & JavaScript

Popup Modal Box using HTML, CSS & JavaScript

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.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="style.css" /> <title>Modal pop up || Learning Robo</title> </head> <body> <div class="card"> <a href="#" id="close-btn">×</a> <div class="card-body"> <div class="header"> <h2>Share this article</h2> <p>If you liked this article share it with your friends</p> <p>They will thank you later</p> </div> <div class="social-icons"> <a href="" class="facebook"> <i class="fa fa-facebook" aria-hidden="true"></i> <span>Facebook</span> </a> <a href="" class="twitter"> <i class="fa fa-twitter" aria-hidden="true"></i> <span>Twitter</span> </a> <a href="" class="reddit"> <i class="fa fa-reddit-alien" aria-hidden="true"></i> <span>Reddit</span> </a> </div> <p class="shares"><span>10k+ </span>Shares</p> <a href="#" class="close-link"> Close the Window</a> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive, create a CSS file with the name style.css, and remember that you have to make a file with a .css 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;
} 
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js and remember that you've got need to make a file with a .js extension.


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');
})
We hope you would like this Popup Modal Box using HTML, CSS & JavaScript.

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.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome