当我在 Javascript 上使用点击事件时，如何防止我的图像消失？

Question

我正在创建一个图片库，每当我点击图片时，它都会在屏幕上完全显示。 但是，每当我尝试单击它并返回正常的网站屏幕时，图像就完全消失了。

这是一个显示问题https://codepen.io/designextras/pen/WNrQMdM的代码笔

在 html 中，我通过在我的 Javascript 中为“.services-cell”使用 firstElementChild 来定位图像标签

    <div class="services-cell">
        <img class="services-cell_img" src="gallery/img-1.jpg" alt="">
        <div class="services-cell_text">Digital Marketing</div>
    </div>

这是Javascript，它也在上面的codepen中

 let galleryImages = document.querySelectorAll('.services-cell');
 let getLatestOpenedImg;
 let windowWidth = window.innerWidth;


 if(galleryImages) {
  galleryImages.forEach(function(image, index){
    image.onclick = function() {
        console.log(image.firstElementChild);

        getLatestOpenedImg = index + 1;

        let container = document.body;
        let newImgWindow = document.createElement('div');
        container.appendChild(newImgWindow);    
        newImgWindow.setAttribute('class', 'img-window');
        newImgWindow.setAttribute('onclick', 'closeImg()');

        let newImg = image.firstElementChild;
        newImgWindow.appendChild(newImg);
        newImg.classList.remove('services-cell_img');
        newImg.classList.add('popup-img');


    }
 })
 }

 function closeImg() {
 document.querySelector('.img-window').remove();
 }

这是 CSS 类，我在单击图像时尝试添加

        .img-window {
            width: 100vw;
            height:100vh;
            background: rgba(0,0,0,0.8);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .popup-img {
            max-height: 80vh;
            max-width: 80vw;
            z-index: 200; 
        }

所以底部 function closeImg() 似乎是问题所在，但我不知道我是否会编写代码以关闭图像弹出并返回屏幕，而不会完全从 html 中删除我的图像

Answer 1

当您将 append 图像添加到newImgWIndow时，您正在将其从原始 DIV 中删除。 您应该克隆图像而不是移动它。

        let newImg = image.firstElementChild.cloneNode();
        newImgWindow.appendChild(newImg);
        newImg.classList.remove('services-cell_img');
        newImg.classList.add('popup-img');