Question

如果您单击一个图像，另一幅图像将作为模态弹出，我希望得到它。我希望模式内容是与触发器分开的图像，但是我从W3Schools借用了此代码，并且它是为同一图像编写的。

我尝试在第4行中将其他图像文件作为src放入模态内容（id = img01）。我尝试将第8行中的var img更改为“ img01”。我以不同的组合玩了这两行，但是没有运气。

我试图使其尽可能简洁，但不能完全确定是哪个部分，因此请原谅任何多余的代码，如果您怀疑我不包括某些内容，我可以提供更多信息。

任何帮助将不胜感激！！！：）

HTML

<img id="myImg" src="graphic.jpeg" alt="">  
<div id="myModal" class="modal"> <span class="close">&times;</span> 
<img class="modal-content" id="img01"> </div>

JS

var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
var span = document.getElementsByClassName("close")\[0\];
span.onclick = function() {
modal.style.display = "none";
}

CSS

img {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

#img01 {
  height: 100%;
  width: auto;
}

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.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: 80%;
    max-width: 700px;
}

Answer 1

模态图像内容已加载到JS行modalImg.src = this.src中。尝试使用modalImg.src = "sample/url";代替。

如何通过HTML / CSS / JS将唯一的图像用作模式内容？

1 个答案: