Bootstrap modal images not working - Несколько

Question

Я только что прочитал учебник w3school для этого модального образа автозагрузки. У меня на моей странице две карты изображений. Поэтому мне нужно отобразить два изображения. Но он работает только с одним изображением.

Link to w3school article

<!-- Trigger the Modal --> 

<img id="myImg" src="http://d14dsi4x2zx6ql.cloudfront.net/files/styles/welcome_image/public/VCW_TI_5_BayLoop_Hero_Manley_1280x642_sized.jpg?itok=EaARDZt8" alt=""> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- The Close Button --> 
    <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> 

    <!-- Modal Content (The Image) --> 
    <img class="modal-content" id="img01"> 

    <!-- Modal Caption (Image Text) --> 
    <div id="caption"></div> 
</div> 

вставить "myImg" идентификатор в моем другом образе, но это не сработало. Первое всплывающее изображение работало, как я ожидаю. Что здесь пропало?

Answer 1

Вы не можете дать два элемента и тот же идентификатор , если вы хотите сделать то же самое действие для обоих вы можете дать им класс

<img class="myImg" src="http://placehold.it/850x450" alt="image1" width="200"> 
<img class="myImg" src="http://placehold.it/700x400/f00" alt="image2" width="200"> 

и JS будет:

// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the image and insert it inside the modal - use its "alt" text as a caption 
var img = document.getElementsByClassName('myImg'); 
var modalImg = document.getElementById("img01"); 
var captionText = document.getElementById("caption"); 
//iterate over img to add click event for each one,, jquery will make it much easier 
for(var i=0;i< img.length;i++){ 
    img[i].onclick = function(){ 
     modal.style.display = "block"; 
     modalImg.src = this.src; 
     captionText.innerHTML = this.alt; 
    } 
} 

//jquery option 
/*$('.myImg').on('click', function(){ 
    modal.style.display = "block"; 
    modalImg.src = $(this).attr('src'); 
    captionText.innerHTML = $(this).attr('alt'); 
})*/ 

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

Demo

Answer 2

Идентификатор должен быть уникальным, см. Пример здесь. https://fiddle.jshell.net/wg5p60g7/