@Shadowman69
Верстать или не верстать - вот в чем вопрос?

Почему не работает скрипт для модального окна?

Доброго времени суток! Есть слайдер, сделанный на Slick Slider. Хотел сделать картинки из слайдера модальными, то есть при нажатии на картинку всплывает окно с крестиком (чтоб потом его закрыть) и картинкой, но почему то не работает, думал, что дело в скрипте, уже пробовал его переписать на jQuery, но не помогло. Ниже навожу код.
HTML
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
<div id="myModal" class="modal">
       <span class="close">&times;</span>
       <img class="modal-content" id="img01"/>
</div>
<div class="gallery">
        <img class="img" src="images/interior_1.jpg" alt="#"/>
        <img class="img" src="images/interior_2.jpg" alt="#"/>
         <img class="img" src="images/interior_3.jpg" alt="#"/>
          <img class="img" src="images/interior_4.jpg" alt="#"/>
          <img class="img" src="images/interior_5.jpg" alt="#"/>
</div>


CSS
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    max-height: 500px;
}

.modal-content {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


Java Script
var modal = document.getElementById("myModal");

    // Get the image and insert it inside the modal
    var img = document.getElementsByClassName("img");
    var modalImg = document.getElementById("img01");
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
    };

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
        modal.style.display = "none";
    };

Если кто шарит в таких вещах, помогите пожалуйста, я уже пару часов просидел. но не могу понять почему не работает.
  • Вопрос задан
  • 168 просмотров
Решения вопроса 1
prodavecmacdonalds
@prodavecmacdonalds
коммуницирую
на чистом js нужно применить событие к каждому элементу массива.
https://jsfiddle.net/82mLqmz1/1/
upd
человек в комментах прав, негоже доставлять неудобства копипаста помогающим людям
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы