对于课堂作业,我必须制作一个图像库,我将在我的最终网站上使用这些图像。单击图像时,该图像的放大版本将作为模态图像显示在页面上。但是,被点击的图像必须是“缩略图图像”,其分辨率 (480x270) 比放大的 1920x1080 分辨率小。
这是我的 HTML 代码(我对放大图像使用锚点,对缩略图使用 img src):
<a class="myImages" id="myImg" href="screenshots/image1.jpg" target="_blank">
<img src="screenshots/thumbnails/image1-480.jpg" alt="description" style="width: 100%">
</a>
CSS:
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
width: 100%;
max-width: 70%;
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.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;
}
JavaScript:
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('myImages');
var modalImg = document.getElementById("img01");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.href;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
大部分代码来自 W3Schools,我只是对其进行了一些修改,以便它可以与 20 多幅图像一起使用。
但是,因为 img 周围有一个锚标记,如果我不包含target="_blank"
,当单击图像时,它只会在同一页面上打开放大的图像,而不是模态。如果我包含target="_blank"
,放大的图像将在新选项卡中打开,但模态也会在原始页面上打开。我需要的结果是上述两者的组合,模态需要打开,而图像也不需要在新选项卡中打开。
有什么我做错了吗?我该如何解决?
添加e.preventDefault()
的onclick
功能应该做的工作。
并且不要忘记将 绑定event
到函数
img.onclick = function(e) {
e.preventDefault()
modal.style.display = "block";
modalImg.src = this.href;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句