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

Question

[z_u_q]

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

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

Answer 1

[0xD34F]

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

const modal = document.querySelector('.modal');
const close = modal.querySelector('.close');

document.addEventListener('click', function(e) {
  if (e.target === modal || e.target === close) {
    modal.style.display = 'none';
  }

  if (e.target.tagName === 'BUTTON') {
    modal.style.display = 'block';
  }
});

Comments

[z_u_q]

Спасибо