如何使用唯一的图像作为超文本标记语言/CSS/JS的模态内容？

Question

我想它，如果你点击一个图像，另一个图像将弹出作为一个模式。我希望模态内容是一个独立于触发器的图像，但我从W3Schools借用了这段代码，它是为同一个图像编写的。

我已经尝试将一个不同的图像文件作为src放在第4行的模态内容（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=这个。src。尝试modalImg。src=“示例/url” 而不是那个。