Как привязать модальное окно к элементам, созданным с помощью js?

Question

[Peacefulwarriorr]

Страница содержит список случайных пользователей, которые приходят из стороннего api. Моя задача сделать так, чтобы при клике на эти элементы открывалось модальное окно. Наверняка что-то делаю неправильно, но сижу уже долго и перепробовал все самые известные способы создания модальных окон...
Если кому не трудно посмотрите, пожалуйста, в чем проблема? Обработчик события вешаю вроде правильно и функция к нему написана но стили не реагируют по нажатию..
https://codepen.io/Djontrue/pen/vYXKQQm

Comments

[Вадим]

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

Answer 1

[lUser L]

к элементам, созданным с помощью js

обращайся от родителя, который был загружен в момент загрузки страницы. например от body

Comments

[Peacefulwarriorr]

А что значит обращаться от родителя? Я не совсем понимаю как это..

[lUser L]

Peacefulwarriorr,

А что значит обращаться от родителя? Я не совсем понимаю как это..

можешь почитать, в интернете, благо есть инфа.

let modal = document.querySelector('#popup'),
  modalOverlay = document.querySelector("#popup-overlay"),
  closeButton = document.querySelector("#close-popup");

closeButton - Тут, ты пытаешься получить элемент с id #close-popup, но при этом у самого элемента id нет, и по этому выдает ошибку

<a href="#" class="popup__close close-popup">&times;</a>

Исправил: https://codepen.io/5h4dy_s/pen/yLaJGgL