Stylish Animated Modal Popup With JavaScript

Preview:

Description:

A responsive, stylish, mobile-first modal popup with CSS3 powered animations.

On the desktop this modal popup is displayed in the middle of the screen, while on mobile devices it is displayed at the bottom of the screen instead.

How to use it:

1. The HTML for the modal popup.

<div class="modal__container" id="modal-container">
  <div class="modal__content">
    <div class="modal__close close-modal" title="Close">
      <!-- Replace The Close Button -->
      <i class='bx bx-x'></i>
    </div>
    <!-- Modal Image -->
    <img src="assets/img/star-trophy.png" alt="" class="modal__img">
    <!-- Modal Content -->
    <h1 class="modal__title">Good Job!</h1>
    <p class="modal__description">Click the button to close</p>
    <!-- Action Button -->
    <button class="modal__button modal__button-width">
      View status
    </button>
    <!-- Close Button -->
    <button class="modal__button-link close-modal">
      Close
    </button>
  </div>
</div>

2. Create a button to toggle the modal popup.

<button class="modal__button" id="open-modal">
  Open Modal
</button>

3. The necessary CSS styles for the modal popup.

/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  --hue: 240;
  --first-color: hsl(var(--hue), 16%, 18%);
  --first-color-alt: hsl(var(--hue), 16%, 12%);
  --title-color: hsl(var(--hue), 8%, 15%);
  --text-color: hsl(var(--hue), 8%, 35%);
  --body-color: hsl(var(--hue), 100%, 99%);
  --container-color: #FFF;
  /*========== Font and typography ==========*/
  --big-font-size: 1.5rem;
  /*========== z index ==========*/
  --z-modal: 1000;
}
.container{
  margin-left: 1rem;
  margin-right: 1rem;
}
.modal{
  height: 100vh;
  display: grid;
  place-items: center;
}
.modal__button{
  display: inline-block;
  background-color: var(--first-color);
  color: #FFF;
  padding: 1rem 1.25rem;
  border-radius: .5rem;
  transition: .3s;
}
.modal__button:hover{
  background-color: var(--first-color-alt);
}
.modal__container{
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsla(var(--hue), 18%, 75%, .8);
  width: 100%;
  height: 100%;
  display: grid;
  align-items: flex-end;
  overflow: hidden;
  transition: all .3s;
  z-index: var(--z-modal);
  visibility: hidden;
  opacity: 0;
  /*=== Effect 3 ===*/
  /* perspective: 1000px; */
}
.modal__content{
  position: relative;
  background-color: var(--container-color);
  text-align: center;
  padding: 3rem 2rem 2rem;
  border-radius: 1rem 1rem 0 0;
  transition: all .3s;
  /*=== Effect 1 ===*/
  transform: translateY(10%);
  /*=== Effect 2 ===*/
  /* transform: scale(.5) translateY(10%); */
  /*=== Effect 3 ===*/
  /* transform: rotateX(65deg) scale(.75) translateY(10%);
  transform-origin: 50% 100%; */
}
.modal__img{
  width: 150px;
  margin-bottom: .75rem;
}
.modal__close{
  display: inline-flex;
  background-color: var(--first-color);
  border-radius: .25rem;
  color: #FFF;
  font-size: 1.5rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
  cursor: pointer;
}
.modal__title{
  font-size: var(--big-font-size);
  color: var(--title-color);
  font-weight: 500;
}
.modal__description{
  margin-bottom: 1.5rem;
}
.modal__button-width{
  width: 90%;
}
.modal__button-link{
  display: block;
  margin: 1rem auto 0;
  background-color: transparent;
  color: var(--first-color);
  font-weight: 500;
}
/* Show modal */
.show-modal{
  visibility: visible;
  opacity: 1;
}
.show-modal .modal__content{
  /*=== Effect 1 ===*/
  transform: translateY(0);
  /*=== Effect 2 ===*/
  /* transform: scale(1) translateY(0); */
  /*=== Effect 3 ===*/
  /* transform: rotateX(0) scale(1) translateY(0); */
}
/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (min-width: 576px){
  .modal__content{
    margin: auto;
    width: 380px;
    border-radius: 1.25rem;
  }
  .modal__img{
    width: 170px;
  }
}

4. Use the following JS to open & close the modal popup.

/*=============== SHOW MODAL ===============*/
const showModal = (openButton, modalContent) =>{
    const openBtn = document.getElementById(openButton),
    modalContainer = document.getElementById(modalContent)
    if(openBtn && modalContainer){
        openBtn.addEventListener('click', ()=>{
            modalContainer.classList.add('show-modal')
        })
    }
}
showModal('open-modal','modal-container')
/*=============== CLOSE MODAL ===============*/
const closeBtn = document.querySelectorAll('.close-modal')
function closeModal(){
    const modalContainer = document.getElementById('modal-container')
    modalContainer.classList.remove('show-modal')
}
closeBtn.forEach(c => c.addEventListener('click', closeModal))