У нас есть кнопка, клик по которой должен вызвать появление попапа. План такой: нам нужно поймать тот момент, когда пользователь кликнет по кнопке. Когда это произойдёт, мы добавим попапу класс modal--show, чтобы окно появилось на странице.

Действие «поймать тот момент, когда пользователь кликнет по кнопке» можно назвать по-другому: добавить обработчик события клика по кнопке. Далее, для простоты, опустим слово «событие» и будем говорить так: добавить обработчик клика по кнопке.

Что значит добавить обработчик? Чтобы определить момент, когда происходит какое-то событие на странице, в нашем случае клик по кнопке, мы добавляем кнопке обработчик, который сработает, когда произойдёт клик.

Посмотрим на синтаксис добавления обработчика.

var button = document.querySelector('.button');

button.addEventListener('click', function () {
  // Инструкции
});

Функция addEventListener() говорит о том, что мы добавляем обработчик события на элемент. Дословно «добавляем слушатель события». Обработчик «слышит» всё, что происходит на странице и обязательно услышит, когда произойдёт то событие, которое нужно нам. Если мы правильно его настроим.

Дальше мы подробно разберём синтаксис обработчиков событий и их настройку, а пока найдём кнопку, клик по которой должен вызвать открытие попапа. Это кнопка с классом button-open. Добавим этой кнопке обработчик по аналогии с примером выше.