jQueryで複数モーダル(親要素あり)実装

$(function() {
  // 『モーダルを開くボタン』をクリックしたら、対応する『モーダル本体』を表示
  $('.modal__trigger').click(function() {
    var modalIndex = $(this).index('.modal__trigger'); // クリックされたトリガーのインデックス
    var modalWrapper = $('.modal__wrapper').eq(modalIndex); // クリックされたトリガーに対応するモーダル本体

    // 対応するモーダルを表示
    modalWrapper.fadeIn(400);

    // スクロール位置を戻す
    modalWrapper.find('.modal__container').scrollTop(0);

    // サイトのスクロールを禁止にする
    $('body').css('overflow', 'hidden');
  });

  // 『背景』と『モーダルを閉じるボタン』をクリックしたら、モーダルを非表示
  $('.modal__layer, .modal__close').click(function() {
    $('.modal__wrapper').fadeOut(400);

    // サイトのスクロール禁止を解除する
    $('body').removeAttr('style');
  });
});

/* 複数モーダル */
.modal__trigger {
  cursor: pointer;
}

.modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
}

.modal__layer {
  height: 100%;
  background: rgba(50, 50, 50, 0.85);
  cursor: pointer;
}

.modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
  @include media_queries(pc) {
    width: min(calc(100% - 40px), 600px);
    height: 707px;
  }
  @include media_queries(sp) {
    width: 335px;
    height: 600px;
  }
}

.modal__inner {
  position: relative;
  overflow-y: scroll;
  height: 100%;
}

.modal__content {
  @include media_queries(pc) {
    @include fontsize(14);
  }
  @include media_queries(sp) {
    @include fontsize(12);
  }
  &__img {
    text-align: center;
  }
  &__title {
    color: #000;
    font-style: normal;
    font-weight: 700;
    @include fontsize(20);
    line-height: 26px; /* 130% */
    @include media_queries(pc) {
      padding: 20px 30px 0;
    }
    @include media_queries(sp) {
      padding: 10px 20px 0;
    }
  }
  &__text {
    text-align: left;
    @include media_queries(pc) {
      padding: 10px 30px;
    }
    @include media_queries(sp) {
      padding: 20px;
    }
  }
}

.modal__close {
  position: absolute;
  cursor: pointer;
  transition: opacity 0.6s;
  @include media_queries(pc) {
    top: 30px;
    right: 30px;
  }
  @include media_queries(sp) {
    top: 25px;
    right: 25px;
  }
}

.modal__close:hover {
  opacity: 0.6;
}

.modal__close:before,
.modal__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #888;
  content: "";
}

.modal__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

<div class="modalPage">
  <div class="modalTitle">モーダル</div>

  <div class="parent__list">
    <!-- モーダル１のボックス -->
    <div class="parent__list__box">
      <div class="modal">
        <div class="modal__trigger">モーダル1を開く</div>
        <div class="modal__wrapper">
          <div class="modal__layer"></div>
          <div class="modal__container">
            <div class="modal__inner">
              <div class="modal__title">
                モーダル1
                <button class="modal__close"></button>
              </div>
              <div class="modal__content">
                <p class="modal__content__text">
                  コンテンツテキストコンテンツテキストコンテンツテキストコンテンツテキスト
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- / モーダル１のボックス -->

    <!-- モーダル2のボックス -->
    <div class="parent__list__box">
      <div class="modal">
        <div class="modal__trigger">モーダル2を開く</div>
        <div class="modal__wrapper">
          <div class="modal__layer"></div>
          <div class="modal__container">
            <div class="modal__inner">
              <div class="modal__title">
                モーダル2
                <button class="modal__close"></button>
              </div>
              <div class="modal__content">
                <p class="modal__content__text">
                  コンテンツテキストコンテンツテキストコンテンツテキストコンテンツテキスト
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- / モーダル2のボックス -->

    <!-- モーダル3のボックス -->
    <div class="parent__list__box">
      <div class="modal">
        <div class="modal__trigger">モーダル3を開く</div>
        <div class="modal__wrapper">
          <div class="modal__layer"></div>
          <div class="modal__container">
            <div class="modal__inner">
              <div class="modal__title">
                モーダル3
                <button class="modal__close"></button>
              </div>
              <div class="modal__content">
                <p class="modal__content__text">
                  コンテンツテキストコンテンツテキストコンテンツテキストコンテンツテキスト
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- / モーダル3のボックス -->
  </div>
</div>