Press "Enter" to skip to content

Responsive Popup Modal Using HTML CSS and JavaScript

Responsive Popup Modal is a responsive, elegant, mobile-friendly popup with CSS3 supported animations.

animated modal popup using jquery, css modal popup animation, popup animation css codepen, bootstrap modal popup animation effects, best modal popup design

How to make use of it:

1. HTML for modal popups.

<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. Necessary CSS styles for modal popups.

/*=============== 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 and 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))

Stylish Animated Modal Popup With JavaScript, Responsive Popup Modal Plugin/Github, alternative to modal popup


See Demo And Download

Official Website(bedimcode): Click Here

This superior jQuery/javascript plugin is developed by bedimcode. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *