in this tutorial, we will see together how to make a custom modal for your website using HTML, CSS and JQUERY
a modal is a small message that appears as a pop-up window on your page. it's useful when, for example, you want to display error message or success message, and this is what we will gonna see in this tutorial.
Video tutorial:
HTML part :
<!DOCTYPE HTML>
<html>
<head>
<title>Custom Modal</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1>Custom Modal</h1>
<button id="error" class="error"><i class="fas fa-times"></i>Error Message</button>
<button id="succes" class="succes"><i class="fas fa-check"></i>succes Message</button>
</div>
<div class="filter">
<div class="modal times">
<h1>Error</h1>
<i class="fas fa-times"></i>
<p>an error message</p>
</div>
<div class="modal check">
<h1>Succes</h1>
<i class="fas fa-check"></i>
<p>a succes message</p>
</div>
</div>
<script>
$(document).ready(function(){
$('#error').on('click',function(){
$(".filter").show();
$(".times").show(400);
});
$('#succes').on('click',function(){
$(".filter").show();
$(".check").show(400);
});
});
$(".filter").on('click',function(){
$('.filter').hide();
$('.modal').hide();
})
</script>
</body>
</html>
CSS PART
@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Roboto');
*{
margin:0;
padding: 0;
outline: 0;
}
body{
background-color: #607d8b;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
h1{
text-align: center;
font-size: 2rem;
text-transform: uppercase;
font-family: 'Roboto',sans-serif;
color: #fff;
}
button{
font-family: 'Open Sans',sans-serif;
text-align: center;
padding: 15px 30px;
border: none;
margin: 5px 10px;
border-radius: 5px;
color: #fafafa;
cursor: pointer;
transition: all .4s;
}
button i{
margin-right: 12px;
}
.error{
background-color: #e53935;
}
.succes{
background: #00e676;
}
.error:hover{
background: #ef9a9a;
}
.succes:hover{
background: #69f0ae;
}
.filter{
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(64,64,64,.3);
display: none;
}
.modal{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
box-shadow: 0 5px 5px rgba(30,30,30,.2);
padding: 30px;
width: 40%;
}
.modal i{
width: 100%;
text-align: center;
font-size: 5rem;
margin: 20px 0;
}
.modal p{
text-align: center;
font-family: 'Open sans',sans-serif;
color: #d2d2d2;
}
.check{
display: none;
}
.times {
display: none;
}
.check h1{
color: #00e676;
margin-bottom: 20px;
}
.times h1{
color:#e53935;
}
we hope you enjoyed this simple tutorial, tell us in the comment if you liked, and tell us if there is something that you didn't get we will try to answer your questions. thank you
make a custom modal using HTML, CSS and JQUERY
Reviewed by Medics
on
March 25, 2019
Rating:
Reviewed by Medics
on
March 25, 2019
Rating:
No comments: