[jQuery] 全画面オーバーレイをささっと後付けする方法

<div class="overlay-wrapper">

  <!-- 任意の要素 -->

  <!-- オーバーレイを呼び出す要素 -->
  <div id="call-overlay-btn">オーバーレイを呼び出す</div>

  <!-- オーバーレイで被せる要素 -->
  <div id="overlay">
    <div class="content">
      <p>中身のテキストなど</p>
    </div>
    <div class="close-btn">
      <p>閉じる</p>
    </div>
  </div>

  <!-- 任意の要素 -->

</div>

.overlay-wrapper.active {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  opacity: 0;
  z-index: -123;
  transition: all .2s;
}
.overlay.active{
  min-height: 100vh;
  width: 100vw;
  background-color: white;
  opacity: 1;
  z-index: 123456788;
}

$(function () {
  var scrollTop = 0;

  $('#call-overlay-btn').click(function() {
    scrollTop = $(window).scrollTop();
    $('#overlay').addClass('active');
    var w = $('#overlay').innerHeight();
    $('.overlay-wrapper').outerHeight(w);
    $('.overlay-wrapper').addClass('active');
    $("html,body").animate({scrollTop:0},"10");
  });
  $('#overlay .close-btn').click(function() {
    $('#overlay').removeClass('active');
    $('.overlay-wrapper').removeClass('active');
    $('.overlay-wrapper').css('height', 'auto').height();
    $(window).scrollTop(scrollTop);
  });

});