.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));