模态窗口弹出

Question

大家下午好！

求助，遇到问题，不知道怎么解决...

一般来说，有一个旋转木马，里面有 3 个元素。每个元素都有一个按钮，单击时会弹出一个模态。一切正常，一切正常，只有一个 BUT。由于某种未知原因，它没有在第一个元素中启动模态窗口的打开，请有知识的帮助......我发布了html和js。

轮播元素的结构：

    <section id="rewiews" class="rewiews">
    <div class="container lock-padding">
      <h2 class="section-rewiews-title">отзывы</h2>
    </div>
      <div class="container-swiper lock-padding">
        <div class="rewiews-container">
          <div class="rewiews-text-container">
            <h3 class="rewiews-text-container-title">наргиз</h3>
            <p class="rewiews-text-container-des">Отличное агентство! Быстро и качественно, денег много не взяли. Заказал разработку корпоративного дизайна, всю работу сделали в срок. Чувствуется профессионализм и бережное отношение к клиентам!</p>
            <p class="rewiews-text-container-company">ТОО “Класная компания”</p>
            <div class="letter">
              <a href="#popup" class="letter-btn popup-link">благодарственное письмо</a>
            </div>
          </div>

          <div class="rewiews-text-container">
            <h3 class="rewiews-text-container-title">наргиз</h3>
            <p class="rewiews-text-container-des">Отличное агентство! Быстро и качественно, денег много не взяли. Заказал разработку корпоративного дизайна, всю работу сделали в срок. Чувствуется профессионализм и бережное отношение к клиентам!</p>
            <p class="rewiews-text-container-company">ТОО “Класная компания”</p>
            <div class="letter">
              <a href="#popup" class="letter-btn popup-link">благодарственное письмо</a>
            </div>
          </div>

          <div class="rewiews-text-container">
            <h3 class="rewiews-text-container-title">наргиз</h3>
            <p class="rewiews-text-container-des">Отличное агентство! Быстро и качественно, денег много не взяли. Заказал разработку корпоративного дизайна, всю работу сделали в срок. Чувствуется профессионализм и бережное отношение к клиентам!</p>
            <p class="rewiews-text-container-company">ТОО “Класная компания”</p>
            <div class="letter">
              <a href="#popup" class="letter-btn popup-link">благодарственное письмо</a>
            </div>
          </div>
      
        </div>
      </div>
    
  </section>

弹出式结构：

<div id="popup" class="popup">

JS代码：

const popupLinks = document.querySelectorAll('.popup-link');
const body = document.querySelector('body');
const lockPadding = document.querySelectorAll(".lock-padding");

let unlock = true;

const timeout = 800;

if (popupLinks.length > 0) {
    for (let index = 0; index < popupLinks.length; index++) {
        const popupLink = popupLinks[index];
        popupLink.addEventListener("click", function (e) {
            const popupName = popupLink.getAttribute('href').replace('#', '');
            const curentPopup = document.getElementById(popupName);
            popupOpen(curentPopup);
            e.preventDefault();
        });
    }
}
const popupCloseIcon = document.querySelectorAll('.close-popup');
if (popupCloseIcon.length > 0) {
    for (let index = 0; index < popupCloseIcon.length; index++) {
        const el = popupCloseIcon[index];
        el.addEventListener('click', function (e) {
            popupClose(el.closest('.popup'));
            e.preventDefault();
        });
    }
}

function popupOpen(curentPopup) {
    if (curentPopup && unlock) {
        const popupActive = document.querySelector('.popup.open');
        if (popupActive) {
            popupClose(popupActive, false);
        } else {
            bodyLock();
        }
        curentPopup.classList.add('open');
        curentPopup.addEventListener("click", function (e) {
            if (!e.target.closest('.popup__content')) {
                popupClose(e.target.closest('.popup'));
            }
        });
    }
}

function popupClose(popupActive, doUnlock = true) {
    if (unlock) {
        popupActive.classList.remove('open');
        if (doUnlock) {
            bodyUnLock();
        }
    }
}

function bodyLock() {
    const lockPaddingValue = window.innerWidth - document.querySelector('.rewiews').offsetWidth + 'px';

    if (lockPadding.length > 0) {
        for (let index = 0; index < lockPadding.length; index++) {
            const el = lockPadding[index];
            el.style.paddingRight = lockPaddingValue;
        }
    }
    body.style.paddingRight = lockPaddingValue;
    body.classList.add('lock');

    unlock = false;
    setTimeout(function () {
        unlock = true;
    }, timeout);
}

function bodyUnLock() {
    setTimeout(function () {
        if (lockPadding.length > 0) {
            for (let index = 0; index < lockPadding.length; index++) {
                const el = lockPadding[index];
                el.style.paddingRight = '0px';
            }
        }
        body.style.paddingRight = '0px';
        body.classList.remove('lock');
    }, timeout);

    unlock = false;
    setTimeout(function () {
        unlock = true;
    }, timeout);
}

document.addEventListener('keydown', function (e) {
    if (e.which === 27) {
        const popupActive = document.querySelector('.popup.open');
        popupClose(popupActive);
    }
});

(function () {
    // проверяем поддержку
    if (!Element.prototype.closest) {
        // реализуем
        Element.prototype.closest = function (css) {
            var node = this;
            while (node) {
                if (node.matches(css)) return node;
                else node = node.parentElement;
            }
            return null;
        };
    }
})();
(function () {
    // проверяем поддержку
    if (!Element.prototype.matches) {
        // определяем свойство
        Element.prototype.matches = Element.prototype.matchesSelector ||
            Element.prototype.webkitMatchesSelector ||
            Element.prototype.mozMatchesSelector ||
            Element.prototype.msMatchesSelector;
    }
})();