Subscription Modal Box using HTML, CSS & JavaScript

Subscription Modal Box using HTML, CSS & JavaScript

Hello developers, today in this blog, you'll learn to create a Subscription Modal Box using HTML, CSS & JavaScript.

The modal box is a dialog box that displays some information on the webpage. This may display any of the content like the product details, subscribe details, and so on.

In this blog (Subscription Modal Box), there is a modal box at the center of the webpage. By clicking the button, the box will slide and display some content. In this Subscription Modal Box, there is an image, title, description, email input field, subscribe button, and also some social media icons to share their content. There is also a cross icon to close the box. This Subscription modal box can be used to your webpage.

The source code of this Subscription Modal Box is given below, if you want the source code of this program, you can copy it. You can use this Subscription Modal Box on your project and take this to the subsequent level.

Subscription Modal Box [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" dir="ltr"> <head> <meta charset="utf-8"> <title>Sliding Modal Box || Learningrobo</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <body> <div class="start-btn"> <a href="#">View Modal</a> </div> <div class="center modal-box"> <div class="fas fa-times"></div> <div class="fas fa-envelope icon1"></div> <header>Subscribe for Updates</header> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <form action=""> <div class="fas fa-envelope icon2"></div> <input type="email" required placeholder="abc@example.com"> <button>Subscribe</button> </form> <div class="icons"> <i class="fab fa-facebook-f"></i> <i class="fab fa-twitter"></i> <i class="fab fa-instagram"></i> <i class="fab fa-youtube"></i> </div> <div class="credit">Made with <span style="color:#9867c5;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </body> <script type="text/javascript" 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.


@import url('https://fonts.googleapis.com/css?family=Lobster+Two:700|Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  text-align: center;
  background-color:  #f2f2f2;
  font-family: 'Poppins',sans-serif;
}
::selection{
  color: #fff;
  background: #f2f2f2;
}
.center,.start-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.start-btn a{
  font-size: 25px;
  background: #9867c5;
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 5px 5px 15px rgba(0,0,0,.1);
}
.modal-box{
  top: 40%;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  height: auto;
  width: 400px;
  padding: 30px;
  border-radius: 5px;
  border: 1px solid #9867c5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.start-btn.show-modal{
  opacity: 0;
  visibility: hidden;
}
.modal-box.show-modal{
  top: 50%;
  opacity: 1;
  visibility: visible;
  transition: .4s;
}
.modal-box .fa-times{
  position: absolute;
  top: 0;
  right: 0;
  background: #9867c5;
  height: 45px;
  width: 50px;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  border-radius: 0 5px 0 50px;
  padding-left: 13px;
  cursor: pointer;
}
.fa-times:hover{
  font-size: 22px;
}
.modal-box .icon1{
  font-size: 60px;
  background: #9867c5;
  height: 120px;
  width: 120px;
  color: #fff;
  border-radius: 50%;
  line-height: 120px;
  text-align: center;
  margin-bottom: 10px;
}
.modal-box header{
  font-size: 25px;
  margin-bottom: 10px;
}
.modal-box p{
  line-height: 20px;
  color: grey;
}
form input, form button{
  height: 50px;
  width: 95%;
  border-radius: 3px;
}
form .icon2{
  position: absolute;
  height: 50px;
  width: 50px;
  margin-top: 15px;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  line-height: 50px;
  font-size: 24px;
  border-radius: 5px 0 0 5px;
}
form input{
  margin-top: 15px;
  padding: 0 65px;
  font-size: 18px;
  outline: none;
  border: 2px solid #000;
  caret-color: #9867c5;
}
input::placeholder{
  color: #8c8c8c;
}
form input:focus{
  box-shadow: 0 0 15px #9867c5;
}
form button{
  margin-top: 15px;
  background: #9867c5;
  color: white;
  font-size: 25px;
  border: 1px solid #9867c5;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
  transition: .3s;
}
form button:hover{
  background: #00C9A7;
  border: 1px solid #00C9A7;
  letter-spacing: 2px;
}
.modal-box .icons{
  margin-top: 25px;
}
.icons i{
  font-size: 22px;
  margin: 0 7px;
  color: #9867c5;
  cursor: pointer;
}
.icons i:hover{
  transform: scale(1.1);
  color: #000;
}
.credit a{
  text-decoration: none;
  color: #000;
  font-weight: 800;
}
.credit {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 10px;
  color:#000;
  text-align: center;
}
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


$(document).ready(function(){
           $('.start-btn').click(function(){
             $('.modal-box').toggleClass("show-modal");
             $('.start-btn').toggleClass("show-modal");
           });
           $('.fa-times').click(function(){
             $('.modal-box').toggleClass("show-modal");
             $('.start-btn').toggleClass("show-modal");
           });
         });
We hope you will like this Subscription Modal Box using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem creating this Subscription 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