JAVASCRIPT

disable scroll on modal open

// Select required elements from the DOM
const modal = document.querySelector("#modal");
const body = document.querySelector("body");

const showModal = function (e) {
modal.classList.toggle("hidden");

if (!modal.classList.contains("hidden")) {
// Disable scroll
body.style.overflow = "hidden";
} else {
// Enable scroll
body.style.overflow = "auto";
}
};

prevent page scrolling when a modal is open

// When the modal is shown, we want a fixed body
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;

// When the modal is hidden...
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);