イメージモーダルの閉じるボタンが機能していません

の画像ギャラリーを作成しました。それは動作することが判明しましたが、その際にクローズボタンが壊れてしまい、モーダルを閉じる唯一の方法はページをリロードすることです。イメージモーダルの閉じるボタンが機能していません

出典

2017-11-05 Geminius

理由で、img3要素がもはや存在し、それがcloseスパンに

をクリックリスナーを追加することができます前に、あなたのコードが失敗しているあなたはimg3を参照するすべてのコードを削除するか、その要素を追加する必要がありますどちらかback in

クリックリスナーは、IDで1つずつ追加するのではなく、ループ内に追加することもできます。これは、あなたが追加できることを意味/コード

var modal = document.getElementById('myModal'); 
 

 
// Get the image and insert it inside the modal - use its "alt" text as a caption 
 

 
var modalImg = document.getElementById("img01"); 
 
var captionText = document.getElementById("caption"); 
 
var images = document.getElementsByTagName('img'); 
 

 
// Loop through each of the images 
 
for (var i = 0; i < images.length; i++) { 
 
    images[i].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"; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#myImg { 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 

 
#myImg2 { 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 

 
#myImg3 { 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 

 
#myImg:hover {opacity: 0.7;} 
 

 
#myImg2:hover {opacity: 0.7;} 
 

 
#myImg3:hover {opacity: 0.7;} 
 

 
/* The Modal (background) */ 
 
.modal { 
 
    display: none; /* Hidden by default */ 
 
    position: fixed; /* Stay in place */ 
 
    z-index: 1; /* 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 (image) */ 
 
.modal-content { 
 
    margin: auto; 
 
    display: block; 
 
    width: 80%; 
 
    max-width: 700px; 
 
} 
 

 
/* Caption of Modal Image */ 
 
#caption { 
 
    margin: auto; 
 
    display: block; 
 
    width: 80%; 
 
    max-width: 700px; 
 
    text-align: center; 
 
    color: #ccc; 
 
    padding: 10px 0; 
 
    height: 150px; 
 
} 
 

 
/* Add Animation */ 
 
.modal-content, #caption {  
 
    -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)} 
 
} 
 

 
/* The Close Button */ 
 
.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; 
 
} 
 

 
/* 100% Image Width on Smaller Screens */ 
 
@media only screen and (max-width: 700px){ 
 
    .modal-content { 
 
     width: 100%; 
 
    } 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 
    <span class="close">&times;</span> 
 
    <img class="modal-content" id="img01"> 
 
    <div id="caption"></div> 
 
</div> 
 

 
<h2>Image Modal</h2> 
 

 
<img id="myImg" src="butterfly.png" alt="Butterfly" width="300" height="200"> 
 

 
<img id="myImg2" src="thestreetthatgotmislaid.png" alt="The Street That Got Mislaid" width="300" height="200"> 
 

 
</body> 
 
</html>

出典

2017-11-05 10:54:47 user184994

それは働いていたので、私は別の画像を追加したい場合は、私はジュースimg3要素を追加するなど。ありがとうございました:) – Geminius

正確に。メンテナンスをさらに容易にしたい場合は、タグ名（ 'img'）で要素を取得し、ループ内にクリックリスナを追加することができます。あなたはコードを更新せずに画像を追加/削除することができます:) – user184994

と私はどのようにループ内にリスナーを置くのですか？（申し訳ありませんが、これが愚かな質問である場合） – Geminius

理由あなたが IMG3と、この作業をすべて取り外しelement.Justを運ぶされていない要素のimg 3を宣言しているを更新することなく、画像を削除します細かい

ここ

ソリューション

<!DOCTYPE html> 
     <html> 
     <head> 
      //add your css 
     </head> 
    <body> 

     <!-- The Modal --> 
      <div id="myModal" class="modal"> 
       <span class="close">&times;</span> 
        <img class="modal-content" id="img01"> 
       <div id="caption"></div> 
       </div> 

      <h2>Image Modal</h2> 

      <img id="myImg" src="butterfly.png" alt="Butterfly" width="300" height="200"> 

     <img id="myImg2" src="thestreetthatgotmislaid.png" alt="The Street That Got Mislaid" width="300" height="200"> 

     <script> 
     var modal = document.getElementById('myModal'); 

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

     //handle click for myImg2 
     img2.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"; 
    } 

    window.onclick = function(event) { 
     if (event.target == modal) { 
      modal.style.display = "none"; 
     } 
    } 

    </script> 

     </body> 
    </html>

出典

2017-11-05 11:13:08

イメージモーダルの閉じるボタンが機能していません

答えて

関連する問題