我的弹出图像不工作，而它在我的测试项目中工作答案

【问题标题】：My popup image isn't working, while it is working in my test project我的弹出图像不工作，而它在我的测试项目中工作
【发布时间】：2018-08-17 21:16:24
【问题描述】：

所以对于我的实习，我想制作一个弹出窗口img。因此，当我单击图像时，img 会弹出更大的背景和不透明度。我已经有了代码，但它不起作用。顺便说一句，不介意.grafisch-centrum 课程。它包含在某处。

这是我的 html

<img alt="Briefpapier drukken" class="resrc Gallery__FeaturedImg js-gallery-featured" data-src="https://s3-eu-west-1.amazonaws.com/printdealcdn/content_service/Briefpapier/briefpapier-drukken.png"
    id="changingImg" src="https://s3-eu-west-1.amazonaws.com/printdealcdn/content_service/Briefpapier/briefpapier-drukken.png"
    style="height: 300px !important; width: 300px !important;" />
</div>

<div class="popup" id="popup">
    <img class="popup-img" id="popup-img" />
    <span class="close">&times;</span>
</div>

这是我的 CSS

.grafisch-centrum .popup{
    display: none;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}
.grafisch-centrum .close{
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.grafisch-centrum .close:hover,
.grafisch-centrum .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.popup-img{
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

我的 javascript

var popup = document.getElementById('popup');
var img = document.getElementById('changingImg');
var popupImg = document.getElementById('popup-img');

img.onclick = function () {
    popup.style.display = 'block';
    popupImg.src = this.src;
}

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

span.onclick = function () {
    popup.style.display = 'none';
}

【问题讨论】：

在旁注中您不想使用img.onclick。请改用img.addEventListener()。 developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
请添加所需的行为和特定问题或错误。没有明确的问题陈述的问题对其他读者没有用处。
对不起。这是第一次在 Stackoverflow 上提问。但问题是当我点击图片放大时，它只显示我的标题，没有任何内容。

标签： javascript html css image popup

【解决方案1】：

您有以下事件：

span.onclick = function () {
  popup.style.display = 'none';
} // <-- also this closing bracket was missing from your example

但是span 没有声明

https://jsfiddle.net/zuuajgnk/

如果您打开浏览器的控制台，您会看到以下错误：

未捕获的引用错误：未定义跨度

否则，您的图片在点击时会变大

【讨论】：