JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#login-box" class="log-in-link">ссылка</a>
<p>Тест на прозрачность</p>

CSS

#mask {    
    display: none;
    background: #000; 
    position: fixed; left: 0; top: 0; 
    width: 100%; 
    height: 100%;
    opacity: 0.8;
    z-index: 999;
}

JavaScript

(function() {
    
    $('a.log-in-link').on('click', function() {
        var mask = $('<div/>', {id:'mask'}).appendTo('body').fadeIn(300);

        mask.one('click', function() {
            $(this).fadeOut(300, function() {
                $(this).remove();  
            });
            
            $(document).unbind('keyup.maskremovebyesc');
            
            return false;
        }); 
        
        $(document).one('keyup.maskremovebyesc', function(e){
            if(e.which === 27) {
                mask.fadeOut(300, function() {
                    $(this).remove();  
                });
            }
        });
        
        return false;
    });
    
})();