JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/bigspotteddog/ScrollToFixed/master/jquery-scrolltofixed.js"></script>
<body>
    <a id="pop" href="#">Show popup</a>
    <div class="welcome">
        <div class="welcome-content">
            <a id="close" href="#">Close</a>
        </div>
    </div>
    <br />
    <br />
    <br />
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo semper turpis gravida mattis id quis ante. Nunc ac nisl ut justo vehicula vulputate. Vestibulum eu turpis id enim imperdiet semper vitae vel justo. Sed ullamcorper vulputate lectus. Duis facilisis arcu cursus libero fermentum tincidunt. Integer lorem massa, pulvinar quis luctus in, auctor sed velit. Nam nisi eros, congue mollis dignissim at, ullamcorper sed nulla. Aenean tempor enim ac metus sollicitudin vel placerat nibh ultricies. Aliquam ut nisl tellus. Sed tempor tincidunt sem eu sollicitudin. Sed tempus, dolor at dapibus mattis, tellus metus malesuada dolor, quis molestie diam nisl ac metus. Vestibulum imperdiet laoreet elit, et venenatis turpis tristique in. Vestibulum placerat felis sed felis ornare vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel tempus sem.
    </p>
    <p>
    Praesent vel dolor dui. Nunc accumsan, mi a sagittis imperdiet, nunc metus suscipit enim, vel consectetur sem nunc sed justo. Etiam scelerisque, elit at tincidunt mattis, dolor leo tempus sem, et placerat ligula magna sed risus. Etiam hendrerit nibh a metus placerat euismod. Fusce aliquet, est eget ullamcorper imperdiet, libero mauris blandit augue, et pellentesque quam ipsum id quam. Curabitur pulvinar vulputate justo, at sagittis tortor mollis gravida. Nam malesuada euismod urna, id malesuada velit ultricies vitae. Nam vulputate tristique tincidunt. Cras lectus purus, suscipit ac tempor et, adipiscing vitae sapien. Maecenas odio turpis, congue sit amet lacinia vitae, dignissim vel leo. Sed pellentesque nunc sit amet elit semper vulputate adipiscing...

CSS

body { min-height: 2000px; padding: 10px; }
#pop { position: fixed; background: white; padding: 5px; border: 1px dashed gray; }
.welcome {
    display: none;
    background: black;
    opacity: .7;
    left : 0;
    height : 100%;
    position : fixed;
    top : 0;
    z-index : 1000;
    width : 100%;    
}

.welcome-content {
    background-color : #ffffff;
    border : 10px solid #000000;
    margin : 50px auto 0 auto;
    padding : 10px;
    text-align : justify;
    width : 200px;
}

JavaScript

$('#pop').click( function() {
    $('.welcome').fadeIn().bind('mousewheel DOMMouseScroll', function(e) {
        console.log('scroll');   
        var scrollTo = null;
    
        if (e.type == 'mousewheel') {
            scrollTo = (e.originalEvent.wheelDelta * -1);
        }
        else if (e.type == 'DOMMouseScroll') {
            scrollTo = 40 * e.originalEvent.detail;
        }
         
        if (scrollTo) {
            console.log('prevent');
            e.preventDefault();
            $(this).scrollTop(scrollTo + $(this).scrollTop());
        }
    });   
});

$('#close').click( function() {
    $('.welcome').fadeOut().unbind('mousewheel DOMMouseScroll');
});