jQuery addClass example

Change class name on click in jQuery

HTML

<div id="modal" class="popup">
  <div class="popup__overlay"></div>
  <div class="popup__inner">
    ...
  </div>
</div>

<input type="button" value="написать" class="write">

SCSS

.popup {    
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 250ms ease-in-out;

  &__overlay {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 30;
    cursor: pointer;
    transition: 250ms ease-in-out;
    width: 100%;
    height: 100%;
  }

  &__inner {
    width: 40vw;
    height: 40vh;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    position: fixed;
    z-index: 1001;
    transition: 250ms ease-in-out;
    transform: scale(0);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &--open {
    opacity: 1;
    visibility: visible;

    .popup__inner {
      transform: scale(1);
    }

    .popup__overlay {
      opacity: 1;
      visibility: visible;
    }
  }
}

JavaScript

class Popup{
  constructor(options){
    this.modal 		= $(options.modal);
    this.inner 		= $('.popup__inner', this.modal);
    this.overlay 	= $('.popup__overlay', this.modal);

    this.overlay.on("click", () => this.close());
  }

  open(content){
    this.modal.addClass('popup--open');
    this.inner.html(content);
  }
  close(){
    this.modal.removeClass('popup--open');
  }
}


var p = new Popup({
    modal: "#modal",
});

$(".write").on("click", function(){
    p.open("TEXT");
})