如何解决图像有叠加层时不出现模态
尝试在图片库中单击图像时打开模态。我已经能够让它正常工作,但是一旦我向图像添加叠加层,我的 img 似乎变得无法点击并且我无法触发模态。
想要:1) 找到一种方法,在叠加层出现后保持 img 可点击,或者 2) 更改 JS,以便可以点击叠加层并显示正确的模态图像。
HTML 代码段
<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'">×</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 举报,一经查实,本站将立刻删除。