Best Animated Modal popups using jQuery

A collection of 3 modern animated modal popup box libraries that can be used to display custom content or prompts to your users.

Modal Style #1

A simple animated modal popup, see Live Demo

	Open Modal
	

	

	  
Modal Window
	  
Modal Content
	  
	

modalStyle1.css

	.modal-background {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  display: grid;
	  place-items: center;
	  opacity: 0;
	  visibility: hidden;
	  transform: scale(1, 1);
	  background: rgba(0, 0, 0, 0.5);
	  transition: 0.5s;
	}
	body.open .modal-background {
	  visibility: visible;
	  opacity: 1;
	  animation: background-in 1s both;
	}
	@keyframes modal-in {
	  0%,
	  50% {
	    width: 118px;
	    border-radius: 50%;
	  }
	  55%,
	  100% {
	    right: 50%;
	  }
	  60% {
	    width: 300px;
	    border-radius: 12px;
	  }
	  75% {
	    translate: 50% -50%;
	  }
	}
	.modal {
	  transition: 0.5s;
	}
	.modal {
	  position: fixed;
	  top: 50%;
	  right: -300px;
	  translate: 50% -50%;
	  background: #1d2025;
	  color: #f9f9f9;
	  padding: 48px 40px;
	  width: 300px;
	  height: 118px;
	  border-radius: 12px;
	}
	@keyframes modal-content-in {
	  0%,
	  75% {
	    opacity: 0;
	  }
	  85%,
	  100% {
	    opacity: 1;
	  }
	}
	body.open .modal-content {
	  animation: modal-content-in 1s both;
	}
	body.open > .page-content {
	  scale: 0.75;
	}
	body.open .modal {
	  animation: modal-in 1s both;
	}

modalStyle1.js

	const toggleModal = () => {
	  const bodyClassList = document.body.classList;
	  if (bodyClassList.contains("open")) {
	    bodyClassList.remove("open");
	    bodyClassList.add("closed");
	  } else {
	    bodyClassList.remove("closed");
	    bodyClassList.add("open");
	  }
	};

Modal Style #2

Animated modal popup better than modal style #1. Live Demo

	Open Modal
	

	

	  
Modal Window
	  
Modal Content
	  
	

modalStyle2.css

	.background {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  display: grid;
	  place-items: center;
	  opacity: 0;
	  visibility: hidden;
	  background: rgba(0, 0, 0, 0.5);
	}
	body.open .background {
	  visibility: visible;
	  opacity: 1;
	}
	@keyframes modal-in {
	  0% {
	    translate: -50% 10%;
	    scale: 0.5;
	  }
	  100% {
	    opacity: 1;
	    scale: 1;
	    visibility: visible;
	  }
	}
	.modal,
	.background {
	  transition: 0.5s;
	}
	.modal {
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  background: #1a1a1a;
	  color: #f9f9f9;
	  padding: 48px 40px;
	  width: 300px;
	  border-radius: 12px;
	  translate: -50% -50%;
	  scale: 1;
	  opacity: 0;
	  visibility: hidden;
	}
	body.open > .page-content {
	  scale: 0.75;
	}
	body.open .modal {
	  opacity: 1;
	  visibility: visible;
	  animation: modal-in 0.5s;
	}

modalStyle2.js

	const toggleModal = () => document.body.classList.toggle("open");

Modal Style #3

The ultimate animated modal popup better than modal style #1 and #2 Live Demo

	Open Modal
	

	

	  
Modal Window
	  
Modal Content
	  
	

modalStyle3.css

	.background {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  display: grid;
	  place-items: center;
	  opacity: 0;
	  visibility: hidden;
	  background: rgba(0, 0, 0, 0.5);
	}
	body.open .background {
	  visibility: visible;
	  opacity: 1;
	}
	.background {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  display: grid;
	  place-items: center;
	  opacity: 0;
	  visibility: hidden;
	  background: rgba(0, 0, 0, 0.5);
	}
	body.open .background {
	  visibility: visible;
	  opacity: 1;
	}
	@keyframes modal-in {
	  0%,
	  50% {
	    width: 118px;
	    border-radius: 50%;
	  }
	  55%,
	  100% {
	    right: 50%;
	  }
	  60% {
	    width: 300px;
	    border-radius: 12px;
	  }
	  75% {
	    translate: 50% -50%;
	  }
	}
	.modal,
	.background {
	  transition: 0.5s;
	}
	.modal {
	  position: fixed;
	  top: 50%;
	  right: -300px;
	  translate: 50% -50%;
	  background: #1d2025;
	  color: #f9f9f9;
	  padding: 48px 40px;
	  width: 300px;
	  height: 118px;
	  border-radius: 12px;
	}
	@keyframes modal-content-in {
	  0%,
	  75% {
	    opacity: 0;
	  }
	  85%,
	  100% {
	    opacity: 1;
	  }
	}
	body.open .modal-content {
	  animation: modal-content-in 1s both;
	}
	body.open > .page-content {
	  scale: 0.75;
	}
	body.open .modal {
	  animation: modal-in 1s both;
	}

modalStyle3.js

	const toggleModal = () => document.body.classList.toggle("open");