JSFiddle - React, Tailwind, and code Playground

by hongaar

HTML

<a id="link" href="javascript:void(null);">show popup</a>

<div id="shadow"></div>

CSS

#shadow {
    position: absolute;
    z-index: 9999;
    display: none;
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

JavaScript

var popup;

$(document).ready(function() {
    
    $('#link').on('click', function() {
        showShadow();
        popup = window.open('/echo/html/', 'popup', 'height=100,width=200');
        $(popup).bind('beforeunload', function() {
            disableShadow();
        });
    });
    
});

function showShadow() {
    $('#shadow').fadeIn();
}

function disableShadow() {
    $('#shadow').fadeOut();
}