toggle inline styles with JQuery - display & overflow

by Vishnuprasad ps

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<a href="#" class="button">Button</a>

<div id="overlay"></div>

CSS

body {
  font-family: sans-serif;
  height: 1500px;
  padding: 20px;
}

.button {
  border: 0;
  background: red;
  color: #fff;
  padding: 10px 30px;
  text-decoration: none;
}

#overlay {
  position: fixed;
  top: 100px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
}

JavaScript

$(".button").click(function () {
    $("#overlay").css("display", "block");
    $('body').css('overflow', 'hidden');
});