SimpleModel—javascript中的模态图像问题

oyxsuwqo 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(223)

我正试图在我的照片库中加入一个图像模式。我一直在尝试使用此示例的一个版本：
http://www-db.deis.unibo.it/courses/tw/docs/w3schools/howto/howto_css_modal_images.asp.html
该示例仅适用于一个图像，因为它通过其id访问图像。我尝试对其进行修改，让它通过其类访问图像。但这不起作用。我必须如何修改js代码才能使其与图库中的任何图像一起工作？
非常感谢。
修改代码：
html:

<img class="galleryPic" src="assets/images/test images/globes.jpg" alt="Old globes" width="300" height="200">
<img class="galleryPic" src="assets/images/test images/palmtrees.jpg" alt="Palmtrees in front of the evening sky" width="300" height="200">

        <!-- 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>

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.getElementsByClass('galleryPic');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    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";
}

JavaScript simplemodal

来源：https://stackoverflow.com/questions/68310635/modal-image-issue-in-javascript

1条答案

按热度按时间

lndjwyie1#

世上没有这样的东西 document.getElementsByClass() ，有 document.getElementsByClassName() 如果找到，则返回元素列表。因此，您需要在列表中进行“循环”：

// 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 imgs = document.getElementsByClassName('galleryPic');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (let i = 0; i < imgs.length; i++) {
  imgs[i].onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    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";
}

<img class="galleryPic" src="https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj" alt="Old globes" width="300" height="200">
<img class="galleryPic" src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj" alt="Palmtrees in front of the evening sky" width="300" height="200">

<!-- 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>

赞(0）回复(0）举报 2021-09-23

我来回答

SimpleModel—javascript中的模态图像问题

1条答案

相关问题

热门标签

最新问答