JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "popup">
        <div class = "over"></div>
        <div class = "window">
            <button class = "close">Close</button>
        </div>
    </div>
    
    <div class = "content">
        <p>Filler</p>
        <button class = "pop">Popup</button>
        <p>Filler</p>
        <p>Filler</p>
        <button class = "pop">Popup</button>
        <p>Filler</p>
    </div>

CSS

body {
        margin:0;
    }
    
    p {
        margin:0;
        height:200px;
        background-color:yellow;
    }
    
    .popup {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        display:none;
        z-index:1;
    }
    
    .over {
        width:100%;
        height:100%;
        background-color:gray;
        opacity:0.5;
        position:absolute;
        z-index:-1;
    }
    
    .window {
        border:1px solid black;
        width:50%;
        height:100%;
        overflow:auto;
        margin:0 auto;
        background-color:orange;
    }
    
    .content.paused {
        position:fixed!important;
        width:100%;
        height:1000%;
        overflow:hidden;
        z-index:0;
    }

JavaScript

var scroll;

	$('.pop').click (function () {
		scroll = $(document).scrollTop ();
		$('.popup').show ();
		$('.content').offset ({top:-scroll}).addClass ('paused');
	});
	
	$('.close').click (function () {
		$('.popup').hide ();
		$('.content').removeClass ('paused').removeAttr ('style');
		$(document).scrollTop (scroll);
	});