JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>

<div id="open" class='popupSection'>Click here to open the popup</div>

<div id="popup">
   <div class="popup-wrapper">
      <div class="content">
         <h1>TEST</h1>
      </div>
   </div>
</div>

<div id="footer"></div>

CSS

body {
    overflow-y: auto;
}
#header, #footer {
    float:left;
    display:block;
    height:400px;
    width:100%;
    background: yellow;        
}

#open{
    float:left;
    width:100%;
    display:block;
    height:50px;
    cursor: pointer;
    background: #C8C8C8;
    border-bottom: 1px solid red;
}
#popup {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#popup .content {
    background-color: #E8F0F3;
    border: 1px solid #FFFFFF;
    width: 300px;
    position: absolute;
    z-index: 999;
    left: 50%;
    margin-left: -171px;
    padding: 20px;
    overflow: hidden;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
}

.no-scroll {
    overflow: hidden;
    height: 100%; width: 100%;
}

JavaScript

$('.popupSection').on('click',function(e){
    var target = $(e.target);
    var targetOffset = target.offset().top;
    var scrollPosition = $(window).scrollTop();
    if ( scrollPosition > targetOffset ) {
        openPopup(targetOffset);
    } else {
        var targetHeight = target.height();
        var contentHeight = $('#popup .content').outerHeight();
        var targetBottomOffset = targetOffset + targetHeight - contentHeight;
        openPopup(targetBottomOffset);
    }    
});

var openPopup = function(offset){
    var popup = $('#popup');
    var popupContent = $('#popup .content');
    if ( popup.css('display') === 'none' ) {
        
        popup.css({'display':'block','height':$( document ).height()});
    }
    popupContent.css('top',offset);     
    popup.on('click',function(e){
        e.preventDefault();
        popup.css('display','none');
        popup.off('click');
    }); 
}