JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="myBlurFunction(true)">
<div id="overlay" class="blur"> 
</div>
<div id="popup"> 
<button onclick="javascript: myBlurFunction(false);">X</button> 
<a href="javascript: myBlurFunction(false);">LINK X</a> 
</div>

<p>
some other text to see the blur filter
</p>
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />test scrolling<br />
test scrolling<br />
</body>

CSS

.blur   {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

#overlay    {
    position: fixed;
    display: none;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(255,255,255,.8);
    /*z-index: 999;*/
}

#popup {
    position: fixed;
    width: 400px;
    height: 200px;
    background: rgb(255,255,255);
    border: 5px solid rgb(90,90,90);
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
}

JavaScript

myBlurFunction = function(state) {
    var overlayEle = document.getElementById('overlay');
    var popupEle = document.getElementById('popup');

    if (state) {
        overlayEle.style.display = 'block';
        //overlayEle.setAttribute('class', 'blur');
        popupEle.style.display = 'block';
    } else {
        overlayEle.style.display = 'none';
        //overlayEle.setAttribute('class', null);
        popupEle.style.display = 'none';
    }
};