JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">Шапка</div>
<div class="main">
  <div class="container">
    <div class="main_intro">
      <a href="javascript:;" class="popup-open">Нажмите</a>
    </div>
    <div class="main-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum sapiente illo eos, laborum, doloremque totam quasi at repellendus, doloribus cum, ipsum veritatis sit facere tempora eum unde? Commodi fuga enim ab ex consequuntur, soluta beatae, ipsum laudantium id vitae, ipsa distinctio? Ducimus ullam obcaecati optio maxime dicta tempore dolor vero totam deserunt eius laborum sint ut omnis molestias, error commodi quibusdam aliquid rem fuga tenetur, sapiente consequatur est? Harum provident totam ipsam cum molestiae nisi veritatis, odit ipsum atque quibusdam vel illum culpa, voluptatum officiis minima. Laudantium repudiandae incidunt libero, aspernatur veritatis voluptatem, sint placeat inventore odio provident quaerat obcaecati neque, non molestiae temporibus ut. Quisquam omnis quia placeat iste nemo ad atque? Harum, deleniti, nihil. Sint ut earum quo dolor harum esse dicta deleniti eos saepe, dolores repellendus ratione voluptatem sequi quas, facere incidunt veritatis doloribus vitae quaerat maiores modi necessitatibus accusamus totam. Delectus fugit placeat odio eos, ipsam accusamus rem at exercitationem similique, amet doloribus aliquam omnis obcaecati dignissimos voluptatum hic alias corporis quae eum dolore aspernatur necessitatibus consequuntur illum. Facilis inventore quia sapiente aut alias maiores, molestias ipsum quos pariatur, eum perferendis consequatur dicta! Recusandae tenetur laudantium, ipsum totam explicabo dolores odio iste excepturi nostrum necessitatibus vitae nisi, deserunt vero? Ut sint vero illo placeat, delectus adipisci doloribus temporibus earum ad quae dignissimos laudantium officiis. Nesciunt, rerum dolores error voluptas dolore laudantium dolor, cupiditate mollitia iste placeat alias, officia quis inventore commodi....

SCSS

body.scoll-off {
    overflow: hidden;
}
.header {
  height: 70px;
  background-color: #000;
}
.container {
  max-width: 800px;
  margin: auto;
}
.main {
  background-color: #fff;
  &_intro {
    padding: 20px 0;
  }
}

.popup {
    position: fixed;
    top: 70px;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    z-index: 200;
        height: 100%;
    overflow: auto;
    background-color: #eee;
    &.is-open {
      opacity: 1;
      visibility: visible;
    }
}

JavaScript

$('.popup-open').on('click', function(){
    $('.popup').addClass('is-open');
    $('body').toggleClass('scoll-off');
  });
  $('.popup-close').on('click', function(){
    $('.popup').removeClass('is-open');
    $('body').toggleClass('scoll-off');
  });