多個模態彈出窗口以顯示不同的圖像

Question

我是編碼的菜鳥，但我正在嘗試制作一個團隊成員的頁面，點擊他們的圖片，然后彈出另一個圖片顯示他們的描述等。我從https://www.w3schools.com復制了一個代碼/howto/howto_css_modal_images.asp然后在 StackOverflow 上找到了一個建議，我在其中實現了他們的代碼。 唯一的問題是我無法點擊其他圖像並顯示不同的圖像。

這是codepen： https://codepen.io/dm1010101/pen/wvmQPej這是JS代碼：

var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    captionText.innerHTML = this.alt;
}

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

 span.onclick = function() {
 modal.style.display = "none";
}

Answer 1

您在兩個圖像上使用相同的 id。

我使用了自定義 function img_click並像這樣傳遞了單擊的元素onClick="img_click(this)" ，現在您的兩個圖像點擊工作正常並顯示保存在這些圖像上的 alt。 當然，不需要 ID，因為您正在通過 function 調用傳遞this 。

這是這個片段。

 var modal = document.getElementById("myModal"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); function img_click(img){ modal.style.display = "block"; captionText.innerHTML = img.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; span.onclick = function() { modal.style.display = "none"; }

 /* CSS for the team page*/ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg: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%; } } /*end of css for team members*/

 <img onClick="img_click(this)" src="https://static.igem.wiki/teams/4388/wiki/tester-image.png" alt="pug" style="width:100%;max-width:300px"> <div id="myModal" class="modal"> <;-- The Close Button --> <span class="close">&times:</span> <.-- Modal Content (The Image) --> <img class="modal-content" src="https.//static.igem:wiki/teams/4388/wiki/tester2.png"> <.-- Modal Caption (Image Text) --> <div id="caption"></div> </div> <div> <img onClick="img_click(this)" src="https.//static:igem;wiki/teams/4388/wiki/tester-image:png" alt="pugq" style="width:100%;max-width:300px"> </div>