コピペでできる！初心者でも簡単に作れる画像拡大モーダルの実装方法

<!-- 画像のグリッド -->
<div class="image-grid">
  <img
    class="thumbnail"
    src="https://plus.unsplash.com/premium_photo-1680172800933-ae8462274162?q=80&w=300&h=300&auto=format&fit=crop"
    alt="画像1"
  />
  <img
    class="thumbnail"
    src="https://plus.unsplash.com/premium_photo-1722686461601-b2a018a4213b?q=80&w=300&h=300&auto=format&fit=crop"
    alt="画像2"
  />
  <img
    class="thumbnail"
    src="https://images.unsplash.com/photo-1495147466023-ac5c588e2e94?q=80&w=300&h=300&auto=format&fit=crop"
    alt="画像3"
  />
</div>

<!-- モーダル -->
<div id="myModal" class="modal">
  <span class="close">×</span> <!-- 閉じるボタン -->
  <img class="modal-content" id="js-modal-img" /> <!-- 拡大画像 -->
  <div id="caption"></div> <!-- 画像のキャプション -->
</div>

/* サムネイルを並べるエリア */
.image-grid {
  display: flex;              /* 横並びに配置 */
  justify-content: space-around;
  gap: 20px;                  /* 画像同士の間隔 */
}

/* サムネイル画像 */
.thumbnail {
  width: 100%;
  cursor: pointer;            /* クリックできるカーソルに */
  transition: transform 0.3s; /* ホバー時のアニメーション */
}
.thumbnail:hover {
  transform: scale(1.05);     /* ホバー時に少し拡大 */
}

/* モーダル全体 */
.modal {
  display: none;              /* 初期状態は非表示 */
  position: fixed;            /* スクロールしても固定 */
  z-index: 1;                 /* 最前面に表示 */
  left: 0; 
  top: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.7); /* 半透明の背景 */
}

/* 拡大画像 */
.modal-content {
  margin: 15% auto;
  display: block;
  width: 80%;
  max-width: 700px;           /* 最大サイズを制限 */
}

/* 閉じるボタン */
.close {
  position: absolute;
  top: 10px; 
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}

 // モーダルの取得
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("js-modal-img");
var captionText = document.getElementById("caption");

// サムネイル画像をクリックしたときの処理
var images = document.querySelectorAll(".thumbnail");
images.forEach(function(img) {
    img.onclick = function() {
        modal.style.display = "block";
        modalImg.src = this.src; // クリックした画像をモーダルに表示
        captionText.innerHTML = this.alt; // キャプションを設定
    }
});

// 閉じるボタンをクリックしたときにモーダルを閉じる
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
    modal.style.display = "none";
}

// モーダル外をクリックしたときにモーダルを閉じる
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}