如何将getElementsByClassName用于多个模式图像?

时间:2019-06-09 21:38:35

标签: javascript modal-dialog getelementsbyclassname

我正在尝试使用纯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;
        }
    }
}

是否有一种方法可以将这两个元素组合在一起,从而使整个工作正常进行?

0 个答案:

没有答案