【プラグインなし】同一ページに複数のモーダルウィンドウを仕込む方法【CSS・jQuery】

<a href="#" class="js-modal-open">モーダルウィンドウを開く</a>

<div class="modal js-modal">
  <div class="modal-bg js-modal-close">
  </div>
    <div class="modal-content">
      <p>ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。</p>
      <a href="#" class="js-modal-close">閉じる</a>
    </div>
</div>

<script>
  var scrollPosition;

  // モーダルウィンドウを開く
  $('.js-modal-open').on('click', function(){
    scrollPosition = $(window).scrollTop();
    $('body').addClass('fixed').css({'top': -scrollPosition});
    $('.js-modal').fadeIn();
    return false;
  });

  // モーダルウィンドウを閉じる
  $('.js-modal-close').on('click', function(){
    $('body').removeClass('fixed');
    window.scrollTo( 0 , scrollPosition );
    $('.js-modal').fadeOut();
    return false;
  });
</script>

/* これが無いとモーダルウィンドウ表示の際に余白が出る */
*{
  margin: 0;
  padding: 0;
}

/* モーダル全体(背景＋本体) */
.modal{
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
}

/* モーダル背景 */
.modal-bg{
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}

/* モーダル本体 */
.modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll; /* はみ出た部分はスクロールさせる */
  height: 60%;/* これが無いと「overflow:scroll」が利かない */
  width: 60%;/* これが無いと「overflow:scroll」が利かない */
  background: white;
  padding: 40px;
}

/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}

<a href="#" class="js-modal-open" data-target="modal01">モーダルウィンドウ１を開く</a>
<a href="#" class="js-modal-open" data-target="modal02">モーダルウィンドウ２を開く</a>
<a href="#" class="js-modal-open" data-target="modal03">モーダルウィンドウ３を開く</a>

<div id="modal01" class="modal js-modal">
  <div class="modal-bg js-modal-close">
  </div>
    <div class="modal-content">
      <p>同一ページに複数のモーダルウィンドウが存在する場合。同一ページに複数のモーダルウィンドウが存在する場合。</p>
      <a href="#" class="js-modal-close">閉じる</a>
    </div>
</div>

<div id="modal02" class="modal js-modal">
  <div class="modal-bg js-modal-close">
  </div>
    <div class="modal-content">
      <p>ここにコンテンツ２が入ります。ここにコンテンツ２が入ります。ここにコンテンツ２が入ります。</p>
      <a href="#" class="js-modal-close">閉じる</a>
    </div>
</div>

<div id="modal03" class="modal js-modal">
  <div class="modal-bg js-modal-close">
  </div>
    <div class="modal-content">
      <p>ここにコンテンツ３が入ります。ここにコンテンツ３が入ります。ここにコンテンツ３が入ります。</p>
      <img src="img/soccer.jpg" class="aaa">
      <a href="#" class="js-modal-close">閉じる</a>
    </div>
</div>

<script>
// モーダルウィンドウを開く
$('.js-modal-open').on('click', function(){
  var target = $(this).data('target');
  var modal = document.getElementById(target);
  scrollPosition = $(window).scrollTop();

  $('body').addClass('fixed').css({'top': -scrollPosition});
  $(modal).fadeIn();
  return false;
});

// モーダルウィンドウを閉じる
$('.js-modal-close').on('click', function(){
  $('body').removeClass('fixed');
  window.scrollTo( 0 , scrollPosition );
  $('.js-modal').fadeOut();
  return false;
});
</script>