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'});
		$('body').append(mask);
		
        mask.fadeIn(300);
        
        return false;
    });
    
    $(document).keyup(function(e){
        if(e.which === 27) {
            $('#mask').fadeOut(300, function() {
                $(this).remove();  
            }); 
        }
    });
    
    $(document).on('click', '#mask', function() {
        $(this).fadeOut(300, function() {
            $(this).remove();  
        });
        
		return false;
    }); 
    
})();