Как правильно сделать модальное окно?

Question

[Иван Симонов]

Есть код - fiddle
Сейчас открывается сразу два окна
Подскажите, как правильно объединить кнопку с дата аттрибутом и id модального окна?

Answer 1

[0xD34F]

const openSelector = '[data-target]';
const closeSelector = '.modal__close';
const modalSelector = '.modal';
const activeClass = 'modal--active';

Делегирование, общий обработчик клика назначается один раз для всех:

document.addEventListener('click', ({ target: t }) => {
  const open = t.closest(openSelector);
  if (open) {
    document.querySelector(`#${open.dataset.target}`).classList.add(activeClass);
  } else {
    t.closest(closeSelector)?.closest(modalSelector).classList.remove(activeClass);
  }
});

Отдельные обработчики для кнопок открытия и закрытия, назначаются каждой кнопке индивидуально:

const onClick = (selector, handler) => document
  .querySelectorAll(selector)
  .forEach(n => n.addEventListener('click', handler));

onClick(openSelector, ({ currentTarget: { dataset: { target } } }) => {
  document.querySelector(`#${target}`).classList.add(activeClass);
});

onClick(closeSelector, e => {
  e.currentTarget.closest(modalSelector).classList.remove(activeClass);
});