【コピペOK】複数のモーダルを同じクラス名で設置する方法

<ul class="hoge-list">
  <li class="hoge-item">
    <div class="img-box">
      <!-- この画像をクリックするとモーダルウィンドウが表示される -->
      <img src="https://picsum.photos/500/500" alt="altの内容01→ここの文字列をモーダルウィンドウに表示させています">
    </div>
    <p class="ttl">タイトル01</p>
    <p class="txt">説明が入ります。</p>
  </li>
</ul>

<!-- モーダルウィンドウ -->
<div class="modal-block">
  <div class="img-section">
    <span>
      <!-- close btn -->
    </span>
    <img id="popup" src="クリックした画像のパスが入ります">
    <div class="caption"><!--  altの内容が入ります --></div>
  </div>
</div>

.modal-block {
<!-- デフォルトはdisplay: none;で非表示 -->
  display: none;
  position: fixed;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: auto;
<!-- モーダルウィンドウの背景 -->
  background-color: rgba(0, 0, 0, 0.8);

  .img-section {
<!-- 画像の大きさ （適当なサイズなので、適宜変更ください) -->
    width: 60vw;
    height: 60vh;
    position: relative;
    margin: 0 auto;

<!-- 「閉じる」ボタン （適当なスタイルなので、適宜変更ください） -->
    span {
      position: absolute;
      transform: translate(50%, -50%);
      top: 0;
      right: 0;
      cursor: pointer;
      &::before {
        content: "";
        width: 30px;
        height: 30px;
        background: red;
        border-radius: 50%;
        display: block;
      }
    }
<!-- 画像サイズ（固定なら不要かも）-->
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

<!-- 画像下の説明文のスタイル（フォントサイズやカラーなど、適宜変更ください） -->
  .caption {
    font-size: 20px;
    letter-spacing: .09em;
    color: #fff;
    margin-top: 10px;
    text-align: center;
  }
}

$(".hoge-item .img-box > img").click(function () {
  var src = $(this).attr("src");
  var cap = $(this).attr("alt");
  $(".modal-block").fadeIn().css("display", "flex");

  $("#popup").attr("src", src);
  $(".caption").text(cap);
});

$(".modal-block").click(function (e) {
  // モーダルの外側をクリックした場合にのみモーダルを閉じる
  if (e.target === this) {
    $(this).css("display", "none");
  }
});

$(".img-section > span").click(function () {
  // モーダルを閉じるボタンがクリックされた場合にモーダルを閉じる
  $(".modal-block").css("display", "none");
});

$(".hoge-item .img-box >img").click(function (){}

var src = $(this).attr("src");
var cap = $(this).attr("alt")

$(".modal-block").fadeIn()
$(".modal-block").css("display", "flex")

$("#popup").attr("src", src);

$(".caption").text(cap);

$(".img-section > span").click(function () {
  // モーダルを閉じるボタンがクリックでモーダルを閉じる
  $(".modal-block").css("display", "none");
});

$(".modal-block").click(function (e) {
  // モーダルの外側をクリックでモーダルを閉じる
  if (e.target === this) {
    $(this).css("display", "none");
  }
});