JSFiddle - React, Tailwind, and code Playground
HTML
<div id="page_expander"></div>
<div id="overlay">Paused</div>
CSS
#overlay {
background: rgba(0,0,0,0.5);
position:fixed;
top:50px; left:50px; right:50px; bottom:50px;
display: none;
}
JavaScript
overlay = document.getElementById('overlay');
page_expander = document.getElementById('page_expander');
overlay.onclick = function () {
document.body.style.overflow = ''
overlay.style.display = 'none';
};
page_expander.onclick = function () {
document.body.style.overflow = 'hidden'
overlay.style.display = 'block';
};
var j = 1000, s = '';
while (--j) s = s + '<br/>' + j;
document.getElementById('page_expander').innerHTML = s;