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.
@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;
}
$(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");
});
});
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.
Post a Comment
Thank you
Learning robo team