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>
<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />
.<br />
.<br />
.<br />
.<br />
.<br />
.<br />
</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...
CSS
body { min-height: 2000px; padding: 10px; }
body.freeze { overflow: hidden; }
#pop { position: fixed; background: white; padding: 5px; border: 1px dashed gray; }
.welcome {
display: none;
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;
height: 200px;
overflow: scroll;
}
JavaScript
$('#pop').click( function() {
$('.welcome').fadeIn();
$('body').addClass('freeze');
});
$('#close').click( function() {
$('.welcome').fadeOut();
$('body').removeClass('freeze');
});