JSFiddle - React, Tailwind, and code Playground

HTML

<button class="trigger">Toggle popup</button>

<div id="layer"></div>

CSS

body {
    height: 2100px;
    margin:0;
}
html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

#layer{
        background: #3D464D;
    opacity: 0.6;
    cursor: pointer;
    display: block;
    height: 100%;
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
    z-index: 1;
    display: none;
}
button{
    z-index:4;
    position:fixed;
}

JavaScript

$('button').click(function() {
    $('html').toggleClass('noscroll');
    $('#layer').toggle();
});