Javascript模式-图片库

编程问答 2022-08-15

问题描述

出现问题，我的图片库中的点击没有打开模态。想寻求帮助。所以我得到了如下所示的HTML图片库：

<div id="mainbox">
<h2 class="text">Gallery</h2>
<div class="gallery">
    
    <div class="img-container">
            <img
                 src="./gallery/small/1.jpg"
                 data-original="./gallery/1.jpeg"
            />
    </div>
    <div class="img-container">
            <img
                 src="./gallery/small/2.jpg"
                 data-original="./gallery/2.jpeg"
            />
    </div>
</div>

<div class="modal">
    <img src="./gallery/1.jpeg" class="full-img" />
    <p class="caption">xxxxxxxxx</p>
</div>

然后有模式类。

CSS：

 .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    min-height: 400px;
    grid-gap: 2rem;
    padding: 0 5% 5% 5%;
}
.img-container {
    overflow: hidden;
}
.img-container img {
    width:100%;
    height: 300px;
    object-fit: cover;
    transition: all 0.3s ease-out;
    cursor: pointer;
}
.img-container img:hover {
    transform: scale(1.2);
}
.modal {
    display: none;
    background: rgba(0,0.7);
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease-out;
}
.modal.open {
    opacity: 1;
    pointer-events: all;
}

.full-img {
    position: absolute;
    height: 70%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%) scale(0.5);
    transition: all 0.25s ease-out;
}
.full-img.open {
    transform: translate(-50%,-50%) scale(1);
}

JavaScript：

> const modal = document.querySelector(".modal");
const previews = document.querySelectorAll(".gallery img");
const original = document.querySelector(".full-img");
const caption = document.querySelector(".caption");

previews.forEach((preview) => {
    preview.addEventListener("click",() => {
        modal.classList.add("open");
        original.classList.add("open");

        //dynamic change text and image
        const originalSrc = preview.getAttribute("data-original");
        original.src = `./${originalSrc}`;
    });
});

modal.addEventListener("click",(e) => {
    if (e.target.classList.contains("modal")) {
        modal.classList.remove("open");
        original.classList.remove("open");
    }
});

除了模式之外，一切都正常。我一直在关注本教程，并检查过拼写次数-无法看到任何错误。请指教。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

imageimagejavascriptmodal-dialog