我正在尝试使用纯JavaScript(无JQuery)为图像制作一个非常简单的灯箱效果弹出式窗口。因为使用此功能的任何页面上可能都有多张图片,所以我不能使用getElementById ...,这将需要在最终用户每次添加照片时在JavaScript中添加另一行。
因此,我想使用getElementsByClassName。我有一个版本的效果很好-启动模态,并通过图像源和alt内容-对于第一张图像;但是该类中的所有其他图像在索引中都有不同的编号,因此,当您单击图像时,当然不会发生任何事情。
我有另一个版本,可为您单击的任何图像启动弹出窗口,但不会通过图像源或替代内容。
这是HTML的外观(在第一个版本中,图像标记中缺少onclick事件):
<div id="text">
<img class="popImage" src="photo1.jpg" alt="Lorem ipsum" onclick="PopUp(this)"; />
<img class="popImage" src="photo2.jpg" alt="Dolor sit amet" onclick="PopUp(this)"; />
<img class="popImage" src="photo3.jpg" alt="Iam vero Italia" onclick="PopUp(this)"; />
<img class="popImage" src="photo4.jpg" alt="Novis cladibus" onclick="PopUp(this)"; />
</div>
<div id="imageModal">
<a id="close" onclick="document.getElementById('imageModal').style.display='none'">X</a>
<img id="modalImage" />
<p id="caption"></p>
</div>
...这是JavaScript。对于第一个版本,该版本仅启动一个模态,但会正确显示图像和标题:
var modal = document.getElementById('imageModal');
var modalImg = document.getElementById("modalImage");
var captionText = document.getElementById("caption");
var img = document.getElementsByClassName("popImage")[0];
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
var p = document.getElementById("close");
a.onclick = function() {
modal.style.display = "none";
}
...以及第二个版本,它启动模态但不通过图像源或标题:
var img = document.getElementsByClassName("popImage")[0];
var modal = document.getElementById('imageModal');
var modalImg = document.getElementById("modalImage");
var captionText = document.getElementById("caption");
function PopUp(element){
if (element){
element.getElementsByClassName("popImage")[0];
{
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
}
是否有一种方法可以将这两个元素组合在一起,从而使整个工作正常进行?