多个模态弹出窗口以显示不同的图像

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>