<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Title</title>
<meta charset="utf-8">
<style>
.background{
display:none;
position: fixed;
z-index: 1;
height: 100%;
left: 0;
top: 0;
width: 100%;
padding: 100px;
background-color: rgba(0,0,0,0.4);
}
.modal{
background-color: white;
position: relative;
border: 1px solid #888;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
width: 80%;
}
.header{
width: 100%;
padding: 8px 20px;
background-color: crimson;
color: white;
}
.footer{
width: 100%;
padding: 8px 20px;
background-color: lime;
color: white;
}
.middle{
width: 100%;
padding: 2px 20px;
background-color: white;
color: black;
}
.open {
display: block;
}
h2{
margin: 0px;
}
span{
float: right;
color: white;
font-size: 28px;
font-weight: bold;
cursor: pointer;
padding: 2px 5px;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes fadeintop {
0% {
transform: translateY(-50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.fadeintop {
animation-name: fadeintop;
}
@keyframes fadeouttop {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-50px);
opacity: 0;
}
}
.fadeouttop {
animation-name: fadeouttop;
}
</style>
</head>
<body>
<button id="button">Open Modal</button>
<div class="background" id="MyModal">
<div class="modal" id="modal">
<div class="header">
<span onClick="a()">×</span>
<h2>Header</h2>
</div>
<div class="middle">
<h1>Modal</h1><br>
<h1>Popup Box</h1>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>
</div>
</body>
<script>
var background = $('#MyModal')[0];
$("#button").on("click", e => {
if(!$("#MyModal").hasClass("animated")) {
$("#MyModal").addClass("animated");
}
$("#MyModal").removeClass("fadeouttop");
$("#MyModal").addClass("fadeintop open");
});
function a() {
$("#MyModal").removeClass("fadeintop");
$("#MyModal").addClass("animated fadeouttop");
setTimeout(function(){
$("#MyModal").removeClass("open");
},800);
}
$("body").on("click", event =>{
if(event.target == background)
{
a();
}
});
</script>
</html>
You can use the jquery.
Please try this codes. If you want all animation types :
https://drive.google.com/file/d/1lU58HfEdFEizqpqk7kpfoWWT5_bpB5gq/view?usp=sharing
