Modal / Popup using TailwindCSS
Mohammad Azad
Verified
Modal / Popup using TailwindCSS
Use the modal component to show interactive dialogs & notifications to your website users available in multiple sizes, animation, and styles.
Get started with multiple sizes, colors, and styles built with the utility classes from Tailwind CSS and the animation from my css.
Set the maximum width of a Modal using the max-w-{size} utilities (max-w-3xl, max-w-4xl).
Set the animation of a Modal using the custom css
Zoom in animation
.animation-zoomIn {
animation-name: zoomIn;
animation-duration: 0.7s
}
@keyframes zoomIn {
from { transform: scale(0);}
to {transform: scale(1);}
}
Slide up animation
.animation-slideUp {
animation-name: slideUp;
animation-duration: 0.7s
}
@keyframes slideUp {
from { top:-500px}
to {top:0;}
}
Slide down animation
.animation-slideDown {
animation-name: slideDown ;
animation-duration: 0.7s
}
@keyframes slideDown {
from { bottom:-500px}
to {bottom:0;}
}
Slide left animation
.animation-slideLeft {
animation-name: slideLeft;
animation-duration: 0.7s
}
@keyframes slideLeft {
from { left:-1500px}
to {left:0;}
}
Slide right animation
.animation-slideRight {
animation-name: slideRight;
animation-duration: 0.7s
}
@keyframes slideRight {
from { right:-1500px}
to {right:0;}
}
Script for Closing modal, when user clicks anywhere outside of the modal
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Comments
Leave a Comment