I have successfully built a Modal form using only Javascript and Css. The animation effects in Bootstrap's modal, such as the card appearing FadeInDown and fading out with FadeInUp, caught my attention. I would like to implement similar animations within my application. So far, I have created an animation called FadeIn, but I am unsure how to integrate this logic into Javascript. I have shared snippets of my code below and would greatly appreciate any guidance on incorporating the animation in javascript.
const modal = document.getElementById("myModal");
const btn = document.getElementById("myBtn");
const span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
modal.style.display = "block";
}
span.onclick = function () {
modal.style.display = "none";
}
document.body.addEventListener('click', function (event) {
if (event.target === modal) {
modal.style.display = "none";
}
}) .modal {
display: none;
position: fixed;
z-index: 10;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
opacity: 0;
background-color: rgba(0,0,0,0.5);
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
height: 80%;
border-radius: 5px;
box-shadow: 0 24px 38px 3px rgba(60,75,100,.14);
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* animation*/
.fade{
animation: fadeIn .1s ease-in .5s both;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} <button id="myBtn">Open Modal</button>
<div id="myModal" class="modal fade">
<div class="modal-content">
<span class="close">×</span>
<form action="submit">
<label for="name">Name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">email:</label>
<input type="text" id="email" name="email"><br><br>
<label for="Telephone">Telephone</label>
<input type="number" id="telephone" name="telephone"><br><br>
<label for="description">Description:</label>
<input type="text" id="description" name="description"><br><br>
<input type="submit" value="submit">
</form>
</div>
</div>