困っていること

モーダルをを実装したいのですがエラーも表示されていなくてわかりません

ご教授いただけたら幸いです。

コード

index.html

    <div id="modal" class="modal">
      <span id="modal-close" class="close">&times;</span>
      <img id="modal-content" class="modal-content" />
      <div class="more-images">
        <div class="more-images-item">
          <img class="img-preview" />
        </div>
        <div class="more-images-item">
          <img class="img-preview" />
        </div>
        <div class="more-images-item">
          <img class="img-preview" />
        </div>
        <div class="more-images-item">
          <img class="img-preview" />
        </div>
      </div>
    </div>

index.scss

      .modal {
        display: none;
        position: fixed;
        z-index: 100;
        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);

        .close {
          position: absolute;
          top: 15px;
          right: 35px;
          color: $white;
          font-size: 40px;
          font-weight: 900;
          transition: 0.3s;
          &:hover,
          focus {
            color: $silver;
            text-decoration: none;
            cursor: pointer;
          }
        }

        .modal-content {
          margin: auto;
          display: block;
          width: 80%;
          max-width: 700px;
          animation-name: zoom;
          animation-duration: 0.6s;
        }
        @keyframes zoom {
          from {
            transform: scale(0);
          }

          to {
            transform: scale(1);
          }
        }
      }

index.js

let modal = document.getElementById("modal");
let closeBtn = document.getElementById("modal-close");

closeBtn.onclick = () => {
  modal.style.display = "none";
};

let moreImages = document.getElementsByClassName("more-images-item");
let previewImages = document.getElementsByClassName("img-preview");

Array.from(moreImages).forEach((e) => {
  e.onclick = () => {
    let imgItems = e.parentNode.getElementsByTagName("img");

    Array.from(imgItems).forEach((item, index) => {
      previewImages[index].src = item.src;
    });

    let img = e.querySelector("img");
    modal.style.display = "block";

    let modalContent = modal.querySelector(".modal-content");
    modalContent.src = img.src;

    let temp = modalContent.cloneNode(true);
    modalContent.parentNode.replaceChild(temp, modalContent);
  };
});

行動規範の内容に同意します

回答1件

ベストアンサー

コードから推測すると、
やりたいことは、
.more-images-item をクリックしたらモーダル(#modal)が開き、そこにクリックした画像を表示させたい、
でしょうか。

だとしたら、more-imageクラスの要素をmodalクラスの外に出せばいいでしょう。

html
1<div id="modal" class="modal">
2    <span id="modal-close" class="close">&times;</span>
3    <img id="modal-content" class="modal-content" src="">
4</div>
5<div class="more-images">
6    <div class="more-images-item">
7        <img class="img-preview" src="image1.png">
8    </div>
9    <div class="more-images-item">
10        <img class="img-preview" src="image2.png">
11    </div>
12    <div class="more-images-item">
13        <img class="img-preview" src="image3.png">
14    </div>
15    <div class="more-images-item">
16        <img class="img-preview" src="image4.png">
17    </div>
18</div>