JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="overlay"></div>
<div class="call-button">кнопка</div>

<div class="popup">форточка</div>

CSS

.overlay{
    display: none;
position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.popup{
    display: none;
    position: absolute;
width: 100px;
    height: 100%;
    top: 50%;
    left: 50%;
    color: #fff;
    margin: -50px 0 0 -50px;
    background: rgba(0,0,0,0.9);
    z-index: 999;
}

JavaScript

$(function(){
        $(".call-button").click(function () {
        $(".overlay").fadeIn("slow");
        $(".popup").fadeIn("slow");

        });
     $(".overlay").click(function () {
        $(this).fadeOut("slow");
        $(".popup").fadeOut("slow");
    });
 $(document).on({
        keydown : function(e){
            if(e.keyCode === 27) {
                $('.popup, .overlay').fadeOut("slow");
                return false;
            }
        }
    });

  });