Custom Modal or Dialog Box [Source Codes]
To create this program (Custom Modal Box). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with a .html extension.
Visit for more front-end components : https://stakedesigner.com/
HTML
`<!DOCTYPE html>
<!-- Custom Modal Box | CodingNepal -->
Show Modal
Modal Box
Custom Modal Box
Create a simple modal box using html and css only.
Close Modal
<br> $('.show-btn').click(function(){<br> $('.modal').toggleClass("show");<br> $('.show-btn').addClass("disabled");<br> });<br> $('.close-icon').click(function(){<br> $('.modal').toggleClass("show");<br> $('.show-btn').removeClass("disabled");<br> });<br> $('.close-btn').click(function(){<br> $('.modal').toggleClass("show");<br> $('.show-btn').removeClass("disabled");<br> });<br>
`
CSS
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
background: #f2f2f2;
text-align: center;
overflow: hidden;
}
.show-btn{
position: absolute;
top: 50%;
left: 50%;
user-select: none;
transform: translate(-50%, -50%);
}
.show-btn.disabled{
pointer-events: none;
}
.modal{
position: absolute;
right: 0;
opacity: 0;
bottom: -100%;
width: 360px;
transition: bottom 0.4s, opacity 0.4s;
box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
}
.modal.show{
bottom: 0;
opacity: 1;
}
.modal .top-content{
background: #34495e;
width: 100%;
padding: 0 0 30px 0;
}
.top-content .left-text{
text-align: left;
padding: 10px 15px;
font-size: 18px;
color: #f2f2f2;
font-weight: 500;
user-select: none;
}
.top-content .close-icon{
position: absolute;
top: 10px;
right: 20px;
font-size: 23px;
color: silver;
cursor: pointer;
}
.close-icon:hover{
color: #b6b6b6;
}
.top-content .fa-camera-retro{
font-size: 80px;
color: #f2f2f2;
}
.modal .bottom-content{
background: white;
width: 100%;
padding: 15px 20px;
}
.bottom-content .text{
font-size: 28px;
font-weight: 600;
color: #34495e;
}
.bottom-content p{
font-size: 18px;
line-height: 27px;
color: grey;
}
.bottom-content .close-btn{
padding: 15px 0;
}
.show-btn button,
.close-btn button{
padding: 9px 13px;
background: #27ae60;
border: none;
outline: none;
font-size: 18px;
text-transform: uppercase;
border-radius: 3px;
color: #f2f2f2;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.show-btn button{
padding: 12px 15px;
}
.show-btn button:hover,
.close-btn button:hover{
background: #26a65b;
}
That’s all, now you’ve successfully created a Custom Modal Box using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
Support 🤗
Thanks for reading!
If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!
😊😊 See you later! 😊😊
Top comments (0)