Question

因此，对于我的实习，我想制作一个弹出窗口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';
}

Answer 1

您有以下事件：

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

但span未声明

https://jsfiddle.net/zuuajgnk/

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

未捕获的ReferenceError：未定义span

否则，点击

后图像会变大

我的弹出窗口图像不起作用，而它正在我的测试项目中工作

1 个答案: