灯箱Javascript

Question

我正在建立自己的第一个网站，并且正在尝试创建自己的灯箱。到目前为止，模态中只有第一个图片可见。尽管单击时ID和源会移动，但模式不会打开。这是我的JS代码：

security:
    encoders:
      App\Entity\User:
        algorithm: bcrypt

根据要求在此处编辑我的HTML：

HTML

var modal = document.getElementById('simple-modal');
var modalBtn = document.getElementById('img-link');
var closeBtn = document.getElementsByClassName('close-modal')[0];
const current = document.querySelector('#current');
const imgs = document.querySelectorAll('.imgs img');

modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
imgs.forEach(img => img.addEventListener('click', imgClick));

$('.imgs img').click(function() {

    $('#img-link').removeAttr('id');  

    $(this).attr('id', 'img-link');

    return false;
});

function openModal(e) {
    if (e.target == modalBtn) {
        modal.style.display = 'flex';
    }
}

function imgClick(e) {
    current.src = e.target.src;
}

function closeModal() {
    modal.style.display = 'none';
}

function outsideClick(e) {
    if(e.target == modal) {
        modal.style.display = 'none';
    }
}

谢谢。