modal

modal.js

/*
Класс для предотвращения скрола
.body-lock {
  overflow-y: scroll;
  position:fixed;
}
*/


const openClosePopup = function (obj) {

  const {
    overlay, // оверлей с модальным окном
    classHidden, // класс с dispay: none
    buttonsOpener, // кнопки открытия окна(массив)
    buttonsClose, // кнопки закрытия окна(массив)
    doAction, // что то сделать при открытии мод. окна
    endAction // что то сделать при закрытии мод. окна
  } = obj

  const body = document.body
  // открытие попапа
  const openPopup = function (e) {
    if (e) {
      e.preventDefault();
    }
    overlay.classList.remove(classHidden);
    document.addEventListener("keydown", onCloseModalKey);
    overlay.addEventListener("mousedown", onCloseModalMouse);
    if (doAction) doAction();
    //  для предотвращения скрола
    body.dataset.scrollY = self.pageYOffset // сохраним значение скролла
    body.classList.add('body-lock')
    body.style.top = body.dataset.scrollY + 'px'
  }
//  Обработчик на оверлее для закрытия попапа по клику на нем или на соотв. кнопки
  const onCloseModalMouse = function (e) {
    e.stopPropagation();
    const isButtonClose = Array.from(buttonsClose).some(button => e.target === button);
    if (e.target === this || isButtonClose) {
      removeHandler()
    }
  }

  const onCloseModalKey = function (e) {
    if (e.key === "Escape" && e.target.tagName !== "INPUT") {
      removeHandler()
    }
  }

  const removeHandler = function () {
    overlay.classList.add(classHidden);
    document.removeEventListener("keydown", onCloseModalKey);
    overlay.removeEventListener("mousedown", onCloseModalMouse);
    //  для предовращения скрола
    body.classList.remove('body-lock')
    window.scrollTo(0, body.dataset.scrollY);
    if (endAction) {
      endAction() // если колбэк определен вызываем его, что то сделать после закрытия окна
    }
  }
  
  // навершиваем на каждую кнопку обработчик открытия попапа
  if (buttonsOpener) {
    buttonsOpener.forEach(button => button.addEventListener("click", openPopup))
  } else openPopup()
}

// пример использования
const modalCall = {
  overlay: document.querySelector(".modal--call-invisible"),
  classHidden: 'modal--call-invisible',
  buttonsOpener: document.querySelectorAll("[data-modal-opener]"),
  buttonsClose: document.querySelectorAll(".modal__close--call"),
  doAction,
  endAction
}

openClosePopup(modalCall);