jQuery addClass example

Change class name on click in jQuery

HTML

<div class="modal"></div>
 <div class="overlay"></div>
 <button class="btn">открыть</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;
}

.open{
    display: block;
}

JavaScript

function Popup(obj){

    this.modal = $(obj.modal);
    this.overlay = $(obj.overlay); 
    var popup = this; 
   
   //this.overlay.on('click', this.close);  // как и где теперь это вызвать?
		}

    Popup.prototype.open = function(content){
        
      	this.overlay.addClass('open'); // почему если тут писать popup.overlay
        this.modal.addClass('open');   // то popup is not defined ?
        this.modal.html(content);
    }
     
    Popup.prototype.close = function(){
    
        this.overlay.removeClass('open');
        this.modal.removeClass('open');
              
    }
    

$(function(){

	var p = new Popup({
        modal: '.modal',
        overlay: '.overlay'
    });
    
 $('.btn').on('click', function(){
 	p.open(1);
 })
 
})