JSFiddle - React, Tailwind, and code Playground

HTML

<!-- DOCTYPE HTML5 -->
<html>
<body>

<div>
    <button type='button' id='open'>Open Popup</button>
    <div id="shadow" class="abs top dark hide fullHeight fullWidth center"> THIS IS A SHADOW </div>
</div>
</body>
</html>

CSS

.hide {display:none;}
.abs {position:absolute; z-index: 10;}
.fullHeight{height:100%;}
.fullWidth{width:100%;}
.top{top:0;}
.dark{background-color:#999; background-color: rgba(123,123,123,0.7); opacity: 0.7;}
.center {text-align: center}

JavaScript

function doSomething() {
        alert('hi');    
    }
    $(document).ready(function() {
        $('#open').on('click', function() {
            $('#shadow').show();
            popup = window.open("", "name", "width=400, height=300")
            popup.document.write('<html><body>some text here</body></html>');
            popup.onbeforeunload = function() { $('#shadow').hide();}
        })
    })