基本的に以下ページを、自分用に使いやすくカスタムしただけ。

【jQuery・CSS】意外と簡単！モーダルウィンドウをプラグインなしで作る
# 複数modal対応のcode

<!-- 以下claickでjs発火 data-target="ユニーク名" で紐付け -->
<div class="js-modal-open" href="" data-target="modal01">クリックでモーダル1を表示</div>
<div class="js-modal-open" href="" data-target="modal02">クリックでモーダル2を表示</div>

<!-- data-targetで紐付けた内容 idで管理 -->
<div id="modal01" class="modal js-modal">
  <div class="modal__bg js-modal-close"></div>
  <div class="modal__content">
    <p>1つ目モーダルウィンドウです。</p>
    <a class="modal__close-btn js-modal-close" href=""></a>
  </div><!--modal__content-->
</div><!--modal-->

<div id="modal02" class="modal js-modal">
  <div class="modal__bg js-modal-close"></div>
  <div class="modal__content">
    <p>2つ目モーダルウィンドウです。</p>
    <a class="modal__close-btn js-modal-close" href=""></a>
  </div><!--modal__content-->
</div><!--modal-->

cssはこれを突っ込めば行けるはず。
以下参考コードはSCSSなので注意。

通常のcssはscssの下に記載。

// mordal
//=====================================================
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}
.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
  left: 0;
}
.modal__bg {
  background: rgba(0,0,0,0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content {
  box-sizing: border-box;
  background: #fff;
  left: 50%;
  padding: 45px;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
  max-width: 113rem;
  max-height: 80vh;
  //overflow: scroll;
  min-height: 400px;
}
.modal__close-btn {
  position: absolute;
  width: 64px;
  height: 64px;
  top: 0;
  right: 0;
  //background: red;
  &:before {
    content: "";
    display: block;
    width: 46px;
    height: 1px;
    background: #000;
    transform: rotate(45deg);
    transform-origin: center;
    position: relative;
    top: 31px;
    left: 10px;
  }
  &:after {
    content: "";
    display: block;
    width: 46px;
    height: 1px;
    background: #000;
    transform: rotate(-45deg);
    transform-origin: center;
    position: relative;
    top: 31px;
    left: 10px;
  }
}

こっちは↓↓↓通常のCSS。

body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}

.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
  left: 0;
}

.modal__bg {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}

.modal__content {
  box-sizing: border-box;
  background: #fff;
  left: 50%;
  padding: 45px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 113rem;
  max-height: 80vh;
  min-height: 400px;
}

.modal__close-btn {
  position: absolute;
  width: 64px;
  height: 64px;
  top: 0;
  right: 0;
}
.modal__close-btn:before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  background: #000;
  transform: rotate(45deg);
  transform-origin: center;
  position: relative;
  top: 31px;
  left: 10px;
}
.modal__close-btn:after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  background: #000;
  transform: rotate(-45deg);
  transform-origin: center;
  position: relative;
  top: 31px;
  left: 10px;
}

以下js。
jQueryを先に読むのを忘れずに。
ver.3系で動作確認。

// modal
//=====================================================
$(function(){
  $('.js-modal-open').each(function(){
    $(this).on('click',function(){
      scrollPosition = $(window).scrollTop();
      $('body').addClass('fixed').css({'top': -scrollPosition});
      var target = $(this).data('target');
      var modal = document.getElementById(target);
      $(modal).fadeIn();
      return false;
    });
  });
  $('.js-modal-close').on('click',function(){
    $('body').removeClass('fixed').css({'top': 0});
    window.scrollTo( 0 , scrollPosition );
    $('.js-modal').fadeOut();
    return false;
  });
});