jQuery addClass example

Change class name on click in jQuery

HTML

<button class="button">Open</button>

<div class="popup-section">
  <div class="popup-background">
    <!--CONTENT-->
  </div>
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

CSS

body.popup-open {
  overflow: hidden;
}

.popup-section{
  display: none;
  height: 90vh;
  width: 90vw;
  left: 0;
  right: 0;
  top: 0;
  right: 0;
  overflow: auto;
  position: fixed;
}

.popup-section.open {
  display: block;
}

.popup-background {
  height: 100vh;
  width: 100vw;
  background-color: #ccbcaf;
  cursor: pointer;
}

JavaScript

var button = $('.button');
var popup = $('.popup-section');
var body = $('body');

button.click(function() {
  popup.toggleClass('open');
  body.toggleClass('popup-open');
});

$('.popup-section').click(function() {
  popup.removeClass('open');
  body.removeClass('popup-open');
});