How do I remove the vertical scrolling on the body under my modal popup?

Question

So I have multiple cards on my site, when clicked they each open up a different modal with more info on a topic. Unfortunately, while the modals are up you can scroll not only the modal content but also the background, I would like to create a function that makes the background unscrollable while the modal is open. I just have no idea how to do that, could anyone please help me? This is the code I have for my modals so far:

MY HTML

 <!------------------ Card 1 ---------------------->
    <div class="col-2_sm-12 center card-small bg-dark"> 
        <div class="bg-image landscape corner-round-small lazy" style="background-image:url('{{ page.rec-card-6_image }}');"> </div>
        <button class="modal-button" href="#bfdCourse"> Basic Free Diver </button>

        <div id="bfdCourse" class="modal">
          <div class="modal-content padded">
            <span class="close">&times;</span>
            <h2 class="editable padded uppercase"> Basic Free Diver </h2>
            <div class="bg-image landscape lazy" style="background-image:url('{{ page.rec-card-6_image }}');"></div>  
            <div class="justify padded">
              <p> Mauris vitae nisl efficitur, mattis nisi eu, vulputate massa. Ut eleifend egestas neque, id mollis nisi finibus non. </p>
            </div>
            <button class="button-accent editable"> Book Now </button>
          </div>
        </div>
    </div>


    <!------------------ Card 2 ---------------------->
    <div class="col-2_sm-12 center card-small bg-dark"> 
        <div class="bg-image landscape corner-round-small lazy" style="background-image:url('{{ page.rec-card-7_image }}');"> </div>
        <button class="modal-button" href="#afdCourse"> Advanced Free Diver </button>

        <div id="afdCourse" class="modal">
          <div class="modal-content padded">
            <span class="close">&times;</span>
            <h2 class="editable padded uppercase"> Advanced Free Diver </h2>
            <div class="bg-image landscape lazy" style="background-image:url('{{ page.rec-card-7_image }}');"></div>  
            <div class="justify padded">
              <p> Mauris vitae nisl efficitur, mattis nisi eu, vulputate massa. Ut eleifend egestas neque, id mollis nisi finibus non. </p>
            </div>
            <button class="button-accent editable"> Book Now </button>
          </div>
        </div>
    </div>

MY CSS

.modal-content .bg-image{
  margin: 1rem;
}

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: var(--light);
background-color: rgba(0,0,0,0.5);
color: var(--dark);
}

.modal-content {
background-color: var(--light);
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 700px;
}

.close {
color: #918f8f;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.card-small .modal-button {
  background-color: var(--dark);
  color: var(--light);
  font-weight: 800;
  line-height: 1.1;
  font-size: 1rem;
  border: 1px solid var(--dark);
  padding: 1rem;
}

MY JAVASCRIPT

// Modals
// Get the button that opens the modal
var btn = document.querySelectorAll("button.modal-button");
  
// All page modals  
var modals = document.querySelectorAll('.modal');

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
 btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
 }
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
 spans[i].onclick = function() {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";   
    }
 }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
     for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";  
     }
    }
}

I tried using these css classes:

.modal-open {overflow-y: hidden;}

.show {overflow-y: auto;}

but I don't know how to exactly put them in my Javascript.

Answer 1

I think you should use the background image to be fixed and the modal's position be relative or absolute as it works.