Как сделать чтобы модалка работала для всех кнопок?

Question

[z_u_q]

Сейчас окно открывается только по первой кнопке. Как сделать чтобы модалка работала для всех кнопок?

https://codepen.io/malinosky/pen/RJBQxX

Answer 1

[0xD34F]

.modal.opened {
  display: block;
}

const modal = document.querySelector('.modal');
const close = modal.querySelector('.close');
const toggleModal = state => modal.classList.toggle('opened', state);
const buttonSelector = 'button';

Вариант раз - делаем делегированный обработчик клика, в котором проверяем, где случилось событие. Если кнопка - значит, надо открыть окно. Если корневой элемент окна или .close - наоборот, закрыть:

document.addEventListener('click', ({ target: t }) => {
  if (t === modal || t === close) {
    toggleModal(false);
  } else if (t.matches(buttonSelector)) {
    toggleModal(true);
  }
});

Вариант два - назначаем обработчики непосредственно тем элементам, которые пользователь должен кликать:

[ modal, close ].forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.target === e.currentTarget && toggleModal(false));

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, toggleModal.bind(null, true));

Comments

[z_u_q]

Спасибо