Se débarrasser du défilement du corps de la page lorsque la fenêtre modale est ouverte

Question

J'essaie d'ajouter la classe overflow: hidden; à la body avec du javascript pour cacher le défilement, mais cela ne se produit pas. Qu'est-ce que je fais de travers ?

J'obtiens l'élément par le nom de la balise : var body = document.getElementsByTagName("body");

Ensuite, une fois que la fenêtre modale est activée, je veux ajouter la classe .no-scrolling { overflow: hidden; } à la balise body.

var modal = document.getElementsByClassName("finance-modal")[0];
var btn = document.getElementsByClassName("finance-modal-btn")[0];
var span = document.getElementsByClassName("finance-modal-close")[0];
var body = document.getElementsByTagName("body");

btn.onclick = function() {
  modal.style.display = "block";
  body.classList.add("no-scrolling");
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Et cela ne fonctionne pas !

Il s'agit de mon jsfiddle .

Answer 1

Cela pourrait ne pas fonctionner var body = document.getElementsByTagName("body"); . Essayer var body = document.body; au lieu de cela.

Pour supprimer le défilement, vous devez définir le paramètre {overflow-y: hidden;}

Answer 2

C'est fait !

var body = document.querySelector("body"); l'a fait.

Ce sera le cas à ce moment-là :

var modal = document.getElementsByClassName("finance-modal")[0];
var btn = document.getElementsByClassName("finance-modal-btn")[0];
var span = document.getElementsByClassName("finance-modal-close")[0];
var body = document.querySelector("body");

btn.onclick = function() {
    modal.style.display = "block";
    body.classList.add("no-scrolling");
}
span.onclick = function() {
    modal.style.display = "none";
    body.classList.remove("no-scrolling");
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
        body.classList.remove("no-scrolling");
    }
}