Почему не открываются модальные окна?

Question

[eridanlivia]

Имеется код, прописано, чтобы данные из json подразделялись на карточки, по нажатии на карточку, открывается модальное окно, но почему-то не открывается. Что не так в коде?

fetch("users.json")
        .then(res=>res.json())

        .then(data=>{
            document.body.innerHTML = data.map((item)=>
                `
<div class="textcols-item show-modal">
<div class="trigger">
   <span class="name"><b><h3>${item.name}</h3></b></span>
  <br>
  <br>
   <i class="icono-iphone"></i> &nbsp ${item.phone}
  <br>
  <br>
   <i class="icono-mail"></i> &nbsp ${item.email}
   <br>
   </div>
   </div>
   <div class="modal hidden">
      <button class="close-modal">&times;</button>
         <span class="name"><b><h3>${item.name}</h3></b></span>
         <h5>Телефон:</h5>&nbsp ${item.phone}
         <h5>Почта:</h5>&nbsp ${item.email}
    </div>
`).join(" ");
        })

'use strict';

    const modal = document.querySelector('.modal');
    const overlay = document.querySelector('.overlay');
    const btnClose_modal = document.querySelector('.close-modal');
    const btnsOpenModal = document.querySelectorAll('.show-modal');

    const openModal = function () {
        modal.classList.remove('hidden');
        overlay.classList.remove('hidden');
    };

    const closeModal = function () {
        modal.classList.add('hidden');
        overlay.classList.add('hidden');
    };

    for (let i = 0; i < btnsOpenModal.length; i++) {
        btnsOpenModal[i].addEventListener('click', openModal);
    }

    btnClose_modal.addEventListener('click', closeModal);
    overlay.addEventListener('click', closeModal);

    //Handling an Esc_Keypress Event

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
            closeModal();
        }
    });

Comments

[robodead]

а этот js который вы приложили вы когда исполняете?
После того как отрендерили полученные данные?

[eridanlivia]

sewaca, этот js после

'use strict';

    const modal = document.querySelector('.modal');
    const overlay = document.querySelector('.overlay');
    const btnClose_modal = document.querySelector('.close-modal');
    const btnsOpenModal = document.querySelectorAll('.show-modal');

    const openModal = function () {
        modal.classList.remove('hidden');
        overlay.classList.remove('hidden');
    };

    const closeModal = function () {
        modal.classList.add('hidden');
        overlay.classList.add('hidden');
    };

    for (let i = 0; i < btnsOpenModal.length; i++) {
        btnsOpenModal[i].addEventListener('click', openModal);
    }

    btnClose_modal.addEventListener('click', closeModal);
    overlay.addEventListener('click', closeModal);

    //Handling an Esc_Keypress Event

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
            closeModal();
        }
    });