JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal"></div>
 <div class="overlay"></div>
 <button class="btn">open</button>

CSS

.modal{
    position: fixed;
    width: 60vw;
    height: 60vh;
    margin: 20vh 0 0 20vw;
    background: #fff;
    display: none;
    z-index: 9999;
    box-sizing: border-box; 
    padding: 20px;
}

.overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9998;
    cursor: pointer;
}

.btn:hover{
  cursor: pointer;
}

.open{
    display: block;
}

JavaScript

function Popup(obj){

    this.modal = $(obj.modal);
    this.overlay = $(obj.overlay); 

    var popup = this; // this присвоил в переменную popup

    this.overlay.on('click', function(){

        popup.close(); //здесь popup ссылается на Popup и вызывает у него прототип close, без потери контекста
    });

        }

    Popup.prototype.open = function(content){
        
        this.overlay.addClass('open'); 
        this.modal.addClass('open');   
        this.modal.html(content);
    }
     
    Popup.prototype.close = function(){
       
          this.modal.removeClass('open');
          this.overlay.removeClass('open');
    }
     
    


$(function(){

    var p = new Popup({
        modal: '.modal',
        overlay: '.overlay'
    });
    
$('.btn').on('click', function(){
    p.open('Всплывающее окно');
});

})