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%";
		
	var popup = this;
	
	this.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);
			}
		});
	}
	
	this.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);
				});
			}
		}
	});
	
	
	this.btn.onclick = popup.open;
	$('.overlay, .overlay__close').onclick = popup.close;
}

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

modal.open();