@Serqwezxc

Сократить Jquery код для открытия popup-окон?

https://codepen.io/SergeyYmsk/pen/XWRjgGe. Есть два popup. У них два одинаковых скрипта, но открываются они по разным кнопкам, как можно сократить код?
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Кнопкам и соответствующим им всплывающим окнам добавляете data-атрибуты с одинаковыми значениями. Типа, data-popup="log" и data-popup="reg" окнам, и data-open-popup="log" и data-open-popup="reg" кнопкам. При клике по кнопке смотрите значение атрибута, открываете соответствующее окно. Закрытие окна - убрать обработчик клика по .popup-close, в обработчике клика по document добавить проверку, что целевой элемент лежит внутри .popup-close. Всё:

$('[data-open-popup]').click(function(e) {
  e.stopPropagation();
  $(`[data-popup=${this.dataset.openPopup}]`).addClass('popup--open');
  $('header').addClass('popup--blur');
  $('body').addClass('popup--lock');
});

$(document).click(function(e) {
  const $target = $(e.target);
  if (!$target.closest('.popup__content').length || $target.closest('.popup__close').length) {
    $('.popup').removeClass('popup--open');
    $('header').removeClass('popup--blur');
    $('body').removeClass('popup--lock');
  }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы