@arrow-ecs/reflex/js/modal.js

Reflex UI library

const openModal = (modal, modalOverlay, modalBodyContent) => {
  const modalBody = modal.querySelector('.modal-body');

  if (modalBody && modalBodyContent) { modalBody.innerHTML = modalBodyContent; }

  modal.classList.add('showing');
  modalOverlay.classList.add('showing');

  setTimeout(() => {
    modalOverlay.classList.add('show');
    modal.classList.add('show');
  });
}

const closeModal = (modal, modalOverlay, modalBodyContent) => {
  const modalBody = modal.querySelector('.modal-body');

  modal.classList.remove('show');
  modalOverlay.classList.remove('show');

  setTimeout(() => {
    modal.classList.remove('showing');
    modalOverlay.classList.remove('showing');

    if (modalBodyContent) { modalBody.innerHTML = ''; }
  }, 300);
}

const loadModal = (modalName, modalBodyContent) => {
  const modalTrigger = document.querySelector('button[data-modal="' + modalName + '"]');

  if (!modalTrigger) { return false; }

  modalTrigger.addEventListener('click', () => {
    const modalWrapper = document.querySelector('#' + modalName);
    const modalOverlay = modalWrapper.querySelector('.modal-overlay');
    const modal = modalWrapper.querySelector('.modal');
    const closeModalBtn = modalWrapper.querySelector('.close-modal');

    if (modal) {
      openModal(modal, modalOverlay, modalBodyContent);

      modalOverlay.addEventListener('click', () => {
        closeModal(modal, modalOverlay, modalBodyContent);
      });
    }

    if (closeModalBtn) {
      closeModalBtn.addEventListener('click', () => {
        closeModal(modal, modalOverlay, modalBodyContent);
      });
    }
  })
}