图像有叠加层时不出现模态

问题描述

尝试在图片库中单击图像时打开模态。我已经能够让它正常工作，但是一旦我向图像添加叠加层，我的 img 似乎变得无法点击并且我无法触发模态。

想要：1) 找到一种方法，在叠加层出现后保持 img 可点击，或者 2) 更改 JS，以便可以点击叠加层并显示正确的模态图像。

<div class="column-home">
          <figure class="image-container">
            <img
              class="my-img"
              src="images/People/col-1/01 Orange Shadow.jpg"
              alt="Two shadows of people cast in orange"
            />
            <figcaption class="image-overlay">
              <div class="image-title">Orange Shadow</div>
            </figcaption>
          </figure>
          <figure class="image-container">
            <img
              class="my-img"
              src="images/Travel/col-2/03 Busy street.jpg"
              alt="A girl taking a photo in a busy street"
            />
            <figcaption class="image-overlay">
              <div class="image-title">Busy Street</div>
            </figcaption>
          </figure>
        </div>

参考模态

<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 有效


var modal = document.getElementById('myModal')
var imgContainer = document.getElementsByClassName('image-container')
var img = document.getElementsByClassName('my-img')
var modalimg = document.getElementById('img01')

for (i = 0; i < img.length; i++) {
  img[i].onclick = function () {
    modal.style.display = 'block'
    modalimg.src = this.src
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript photo-gallery