<h1>Animate.css modals animations</h1>
<div class="buttons">
  <button class="btn btn--1" data-modal-target="modal-1">fade</button>
  <button class="btn btn--2" data-modal-target="modal-2" data-animations="backInLeft backOutRight">back</button>
  <button class="btn btn--3" data-modal-target="modal-3" data-animations="flipInX flipOutX">flip</button>
  <button class="btn btn--4" data-modal-target="modal-4" data-animations="rollIn rollOut">roll</button>
</div>

<div class="modals">
  <div class="modals__backdrop" data-modal-backdrop></div>
  <div class="modal" data-modal-name="modal-1">
    <button class="modal__close-btn" data-modal-close-btn>X</button>
    <div class="modal__content">1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse deserunt cupiditate aperiam repudiandae adipisci doloremque culpa asperiores placeat maxime quia amet error quasi incidunt quam ut ipsam natus, accusamus vel.</div>
  </div>
  <div class="modal" data-modal-name="modal-2">
    <button class="modal__close-btn" data-modal-close-btn>X</button>
    <div class="modal__content">2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse deserunt cupiditate aperiam repudiandae adipisci doloremque culpa asperiores placeat maxime quia amet error quasi incidunt quam ut ipsam natus, accusamus vel.</div>
  </div>
  <div class="modal" data-modal-name="modal-3">
    <button class="modal__close-btn" data-modal-close-btn>X</button>
    <div class="modal__content">3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse deserunt cupiditate aperiam repudiandae adipisci doloremque culpa asperiores placeat maxime quia amet error quasi incidunt quam ut ipsam natus, accusamus vel.</div>
  </div>
  <div class="modal" data-modal-name="modal-4">
    <button class="modal__close-btn" data-modal-close-btn>X</button>
    <div class="modal__content">4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse deserunt cupiditate aperiam repudiandae adipisci doloremque culpa asperiores placeat maxime quia amet error quasi incidunt quam ut ipsam natus, accusamus vel.</div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

body {
  overflow-x: hidden;
  font: 1rem / 1.5 Raleway, sans-serif;
  background-color: #fce5cd;
}

h1 {
  color: #351c75;
  font-weight: 700;
}

.btn {
  color: #fce5cd;
  font: 1rem / 1.5 Raleway, sans-serif;
  background-color: #ff3c41;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 200ms;
}

.btn:hover {
  background-color: #8e1c1f;
}

.modals {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.modals--open {
  display: flex;
}

.modals__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000c;
  z-index: -1;
}

.modal {
  display: none;
  position: relative;
  width: 50%;
  padding: 15px;
  margin: auto;
  text-align: center;
  color: #fce5cd;
  background-color: #351c75;
}

.modal--open {
  display: block;
}

.modal__close-btn {
  position: absolute;
  top: 0;
  right: 0;
}

function initModals(root) {
  const modalsRoot = root;
  const modalsBackdrop = modalsRoot.querySelector('[data-modal-backdrop]');
  
  let openedModal = null;
  let isOpen = false;
  let openAnim, closeAnim;

  function openModal(name) {
    openedModal = modalsRoot.querySelector(`[data-modal-name="${name}"]`);
    if (!openedModal) return;
    
    isOpen = true;
    openedModal.classList.add('modal--open', 'animate__animated', `animate__${openAnim}`);
    modalsRoot.classList.add('modals--open');
    modalsBackdrop.classList.add('animate__animated', 'animate__fadeIn');
  }

  function closeModal() {
    if (!isOpen) return;
    
    isOpen = false;
    openedModal.classList.remove(`animate__${openAnim}`);
    openedModal.classList.add(`animate__${closeAnim}`);

    modalsBackdrop.classList.remove('animate__fadeIn');
    modalsBackdrop.classList.add('animate__fadeOut');

    openedModal.addEventListener('animationend', () => {
      modalsRoot.classList.remove('modals--open');
      openedModal.classList.remove('modal--open', `animate__${closeAnim}`);
      modalsBackdrop.classList.remove('animate__fadeOut');
      openedModal = null;
    }, { once: true });
  }

  function onClick({ target, path }) {
    const openButton = target.closest('[data-modal-target]');

    if (openButton) {
      const animations = openButton.dataset.animations;
      if (animations) {
        [ openAnim = 'fadeIn', closeAnim = 'fadeOut' ] = animations.trim().split(/[\s,]+/);
      }
      else {
        [ openAnim, closeAnim ] = ['fadeIn', 'fadeOut'];
      }

      openModal(openButton.dataset.modalTarget);
    }
    else if (
      target.closest('[data-modal-close-btn]') ||
      path.includes(modalsBackdrop)
    ) {
      closeModal();
    }
  }
  
  document.addEventListener('click', onClick);
}

initModals(document.querySelector('.modals'));