modal html css javascript 仅适用于一张图片答案

【问题标题】：modal html css javascript works only on one imagemodal html css javascript 仅适用于一张图片
【发布时间】：2021-04-21 15:16:02
【问题描述】：

我目前正在为一个学校项目制作一个模态，但我不知道为什么它不起作用。

html

 <div id="kw1cpraktijk">
        <img id="myImg" src="../assets/kw1cpraktijk.PNG">
        <h2>Praktijkopdracht P2</h2>
        <p>dit is wat tekst</p>
    </div>
    <div id="willem2praktijk">
        <img id="myImg1" src="../assets/willem2praktijk.PNG">
        <h2>Project P1</h2>
        <p>dit is wat tekst</p>
    </div>
    <div id="myModal" class="modal">
        <span class="close"> &times;</span>
        <img class="modal-content" id="img">
    </div>
css
    
#myImg

{
    
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    width: 100%; 
    max-width:450px;
}




 .modal
    {
        display: none;
        position: fixed;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0, 0.85);
    }
    
    .modal-content
    {
        margin: auto;
        display: block;
        width: 100%;
        max-width: 800px;
        animation-name: zoom;
        animation-duration: 0.6s;
    }
    
    @keyframes zoom
    {
        from {transform:scale(0)}
        to {transform:scale(1);}
    }
    
    .close
    {
        position: absolute;
        color: white;
        font-size: 50px;
        font-weight: bold;
        right: 35px;
        top: 0;
    }
    
    .close:hover
    {
        color: grey;
        cursor: pointer;
        text-decoration: none;
    }

javascript

var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");


img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
}

var exit = document.getElementsByClassName("close")[0];

exit.onclick = function() {
    modal.style.display = "none";
}

它只适用于第一张图片。我应该改变什么？我认为它与javascript有关，因为它只运行一次。我希望有人可以帮助我。

Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Ut dignissim egestas lacus 坐在 amet varius。 Sed nec massa consectetur, posuere ex eget, convallis dui。 Praesent aliquam leo nec metus tristique, vitae eleifend ex finibus。 Pellentesque sagittis luctus eros，in placerat mauris efficitur id。 Suspendisse ultricies 坐在 amet lectus id rhoncus 上。 Nam ligula quam，vulputate quis lacinia vitae，tempus sit amet risus。 Duis lectus lectus, volutpat vitae justo at, pulvinar dignissim est. Nullam dignissim interdum dapibus。 Duis commodo euismod lorem a posuere。 Aliquam tincidunt iaculis vehicula。 Nunc eget 前庭 velit。 Vivamus tempor leo eget ex aliquam sollicitudin。 Suspendisse sodales vel libero 在发酵液中。

【问题讨论】：

标签： javascript html css modal-dialog

【解决方案1】：

这应该可以正常工作！

所以你的代码只适用于第一张图片，你的 js 中有一个小问题，你没有在 js 中为第二张图片编写代码。

我没有更改您的代码（Id 和 className），但我只是添加了一些行来解决您的问题。

我必须告诉你，使用 id 有时会产生一些问题，而且覆盖 html 总是比显示隐藏的 div 更好

var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var img2 = document.getElementById("myImg1");
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");


img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
}
img2.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
}

var exit = document.getElementsByClassName("close")[0];

exit.onclick = function() {
modal.style.display = "none";
}

【讨论】：

想法是正确的，但不是一个好的实现。因为如果有 100 张图片，您必须为每张图片复制\粘贴相同的代码。最好为所有图像设置一些类别并按类别搜索，而不是按 ID。

【解决方案2】：

两个图像都不起作用，因为您使用的是 ID 并且 onclick 功能仅针对一个元素。我推荐使用类，所以它可以用于多个元素。请将您的 javascript 更改为以下内容：

var modal = document.getElementById("myModal");
var img = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");


for ( var e in img ) {
  img[e].onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
  }
}


var exit = document.getElementsByClassName("close")[0];

exit.onclick = function() {
  modal.style.display = "none";
}

这是 HTML：

<div id="kw1cpraktijk">
    <img class="myImg" src="../assets/kw1cpraktijk.PNG">
    <h2>Praktijkopdracht P2</h2>
    <p>dit is wat tekst</p>
</div>
<div id="willem2praktijk">
    <img class="myImg" src="../assets/willem2praktijk.PNG">
    <h2>Project P1</h2>
    <p>dit is wat tekst</p>
</div>
<div id="myModal" class="modal">
    <span class="close"> &times;</span>
    <img class="modal-content" id="img">
</div>

【讨论】：