JSFiddle - React, Tailwind, and code Playground

HTML

<div id="popupholder">
    <div id="wrap">
        <div id="stuff">
            <button class="close">Close me</button>
            <p>First</p>
            <p>First</p>
            <p>First</p>
            <p>First</p>
            <p>First</p>
            <p>First</p>
            <p>First</p>
            <p>First</p>
            <p>First</p>
            <p>First</p>
            <p>First</p>
            <p>First</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>FIRSTFIRSTFIRSTFIRSTFIRST</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
            <p>Last</p>
  ...

CSS

html, body {
    margin: 0px;
}
p {
    margin: 0 auto;
    text-align: center;
    color: #FFF;
    background-color: #F0F;
    font-size: 150%;
    width: 100px;
}
.close {
    display: block;
    height: 20px;
    margin: 75px auto 0px auto;
}
#popupholder {
    max-height: none;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
#wrap {
    max-height: none;
    position: fixed;
    overflow: hidden;
    top: 60px;
    right: 60px;
    left: 60px;
    bottom: 60px;
    background-color: rgba(155, 155, 134, 0.5);
    display: block;
}
#stuff {
    max-height: 100%;
    position: absolute;
    overflow-y: scroll;
    top: 0;
    /* If you want the scrollbar inside the overlay to show up, set right: 0; */
    right: -20px;
    left: 0;
    bottom: 0;
    padding: 10px;
}

JavaScript

$(document).ready(function () {
    var offsetY = window.pageYOffset,
        $body = $('body'),
        $win = $(window),
        $close = $('.close'),
        $open = $('.open'),
        $holder = $('#popupholder'),
        $stuff = $('#stuff');
    // Close with 'esc' key
    $(document).keyup(function (e) {
        if (e.keyCode == 27) $close.trigger('click');
    });
    $open.click(function () {
        offsetY = window.pageYOffset;
        // Block scrolling
        $body.css({
            'position': 'fixed',
                'color': '#FFFF00',
                'backgroundColor': '#00D',
                'top': -offsetY + 'px'
        });
        // Show popup
        $holder.css('display', 'block');
    });

    $close.click(function () {
        // Allow scrolling again
        $body.css({
            'position': 'static',
                'color': '',
                'backgroundColor': ''
        });
        /**
         * Remove the following scrollTop()'s if you want.
         * just a UI tweak that the user would expect.
         **/
        // Make the page stay at the position it was at before the overlay
        $win.scrollTop(offsetY);
        // Reset the overlay scroll position to the top
        $stuff.scrollTop(0);
        // Hide popup
        $holder.css('display', 'none');
    });
});