Mehrere JavaScript-Mods und sie zu schließen

Question

Ich versuche, meine Website-Portfolio für meine Advanced Graphic Design für den Web-Klasse zusammenzustellen, und ich habe ein Problem mit JavaScript und Modals.

Im Wesentlichen habe ich eine Galerie von sechs Fotos, und ich möchte in der Lage sein, auf ein Foto zu klicken und ein modales Pop-up, das eine Diashow von Bildern ist (aber nicht die anderen fünf Bilder auf der Seite). Im Moment kann ich das Modal jedoch nicht schließen, nachdem ich dem zweiten Bild ein Modal hinzugefügt habe. Es erscheint für jeden, wird aber nicht geschlossen. Was mache ich falsch?

Hier ist der HTML:

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-xs-6 col-md-4"><img src="images/IMG_0722.jpg" id="Brown" class="img-responsive" alt="Van Wickle Gates"> 
     <div class="middle"> 
      <div class="text">Brown University</div> 
     </div> 
     <!-- The Modal --> 
     <div id="Modal1" class="modal"> 
      <span class="close">×</span> 
      <img class="modal-content" id="img01"> 
      <div id="caption1"></div> 
     </div> 
    </div> 
    <div class="col-xs-6 col-md-4"><img src="images/IMG_0683.jpg" id="Newport" class="img-responsive" alt="Goat Island Sunset"> 
     <div class="middle"> 
      <div class="text">Newport</div> 
     </div> 
     <!-- The Modal --> 
     <div id="Modal2" class="modal"> 
      <span class="close">×</span> 
      <img class="modal-content" id="img02"> 
      <div id="caption2"></div> 
     </div> 
    </div> 

Und das Javascript:

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

// Get the image and insert it inside the modal - use its "alt" text as a caption 
var img = document.getElementById('Brown'); 
var modalImg = document.getElementById("img01"); 
var captionText = document.getElementById("caption1"); 
img.onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
    captionText.innerHTML = this.alt; 
}; 

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

// Get the image and insert it inside the modal - use its "alt" text as a caption 
var img = document.getElementById('Newport'); 
var modalImg = document.getElementById("img02"); 
var captionText = document.getElementById("caption2"); 
img.onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
    captionText.innerHTML = this.alt; 
}; 

// 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"; 
}; 

Answer 1

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

Dieser Code ist das Dom-Element Modal2auf den gleichen modal Variablen zuweisen, die Modal1 Dom-Element enthält, Du hast also den Hinweis auf das erste Modell gelöscht, und jetzt kannst du ihn nicht mehr erreichen und vor dem Tun verstecken m.