Whenever I click on an element on my webpage, a modal window with a fixed position appears. The issue I am facing is that when I scroll using the mouse or touch gestures on my phone or tablet, the entire page scrolls instead of just the content within the modal window (which has its own scrollbar). I want to restrict scrolling action to be applied only within the modal window and stop scrolling the page. Once the modal window is hidden, I want the scrolling behavior to return to normal for the whole page. Is there a way to achieve this? I attempted to disable body scrolling when the modal window is displayed using jQuery:
$("body").css({"overflow": "hidden"})
However, the only outcome I observed was that the scrollbar for the page disappeared while the mouse scroll still scrolled the entire page behind the modal window.