Лайтбокс Javascript - PullRequest
Новая
       9

Лайтбокс Javascript

0 голосов
/ 11 декабря 2018

Я делаю свой первый сайт и пытаюсь создать свой собственный лайтбокс.До сих пор в модале видна только первая картинка.Хотя идентификатор и источник перемещаются, когда я нажимаю, модальное окно не открывается.Вот мой код JS: 

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';
    }
}

Отредактируйте, как требуется, вот мой HTML:

HTML 

<div class="imgs">
    <img id="img-link" src="../img/pizza-it.png" alt="">
    <img src="../img/mv-logo.png" alt="">
    <img src="../img/kanari-logo.png" alt="">
    <img src="../img/kanari-carte.png" alt="">
</div>

<div id="simple-modal" class="gallery-modal">

    <div class="close-modal">
        <span>&times;</span>
    </div>

    <div id="arrow-prev" class="arrow"></div>

    <div class="modal-box">
        <img src="" id="current">
    </div>

    <div id="arrow-next" class="arrow"></div>
</div>

Заранее спасибо.

...