模式打开时摆脱正文页面滚动

Question

I am trying to add the class overflow: hidden; to the body tag with javascript to hide the scroll but it is not happening. What am I doing wrong?

I am getting the element by tag name: var body = document.getElementsByTagName("body");

Then after the modal is fired I want to add the class .no-scrolling { overflow: hidden; } .no-scrolling { overflow: hidden; } to the body tag.

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";
  }
}

And, it is not working!

This is my jsfiddle .

Answer 1

This might not work var body = document.getElementsByTagName("body"); . Try var body = document.body; instead.

As for removing scrolling you need to set {overflow-y: hidden;}

Answer 2

Done!

var body = document.querySelector("body"); did it.

It would be then:

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");
    }
}