jQuery addClass example

Change class name on click in jQuery

HTML

<button class="subscribe__btn">Кнопка</button>
<div class="footer__form">
  Модальное окно
</div>
<div class="overlay"></div>

CSS

body {
  position: relative;
}

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

.footer__form {
  width: 100px;
  height: 100px;
  background: tomato;
  position: fixed;
  top: 45%;
  left: 50%;
  opacity: 0;
  display: none; 
}

JavaScript

function Modal(options) {
	this.modal = $(options.modal);
  this.btn = $(options.btn);
  this.top = options.top || "50%";
  this.topBegin = options.topBegin || "45%";

	let overlay = document.querySelector('.overlay');
  /* let overlay = $('.overlay') */	
	let popup = this;
  
  
	
	Modal.prototype.open = function(){
			$('.overlay').stop().fadeIn(400,	function(){
				if (document.documentElement.clientWidth > 768) {
					popup.modal.css('display', 'block').stop().animate({opacity: 1, top: popup.top}, 200);
				} else {
					popup.modal.css('display', 'block').stop().animate({opacity: 1}, 200);
				}
			});
		}
  Modal.prototype.close = function(){
    if (document.documentElement.clientWidth > 768) {
      popup.modal.stop().animate({opacity: 0, top: popup.topBegin}, 200, function(){
        $(this).css('display', 'none');
        $('.overlay').stop().fadeOut(400);
      });
    } else {
      popup.modal.stop().animate({opacity: 0}, 200, function(){
        $(this).css('display', 'none');
        $('.overlay').stop().fadeOut(400);
      });
    }
  }	
    
	$(document).keyup(function(e) {
		if (e.keyCode == 27) { 
			if (document.documentElement.clientWidth > 768) {
			popup.modal.animate({opacity: 0, top: popup.topBegin}, 200,  function(){
				$(this).css('display', 'none');
				$('.overlay').stop().fadeOut(400);
				});
			} else {
				$('.header__form').animate({opacity: 0}, 200, function(){ 
					$(this).css('display', 'none');
					$('.overlay').stop().fadeOut(400);
				});
			}
		}
	});
	
	overlay.onclick = popup.close;
	
}

let modal = new Modal({
	modal: ".footer__form",
	btn: ".subscribe__btn"
});

$('.subscribe__btn').on("click", function(event) {
  modal.open(".footer__form");
})