Prevent Web Page Body From Scrolling When A Modal Popup Is Opened

This problem appears when you add a pop-up modal window on your main web page, that will show scrolling underneath the modal window on that web page.

Method 1

You can resolve this issue only with CSS on the body tag using following property but its support is limited.

overscroll-behavior: contain

Method 2

A better and secure approach is to use jQuery to prevent scrolling on web page behind modal popup window, replace the Modal-ID-HERE in the following code, with your modal ID and that should resolve the issue.

//make sure you use opening and closing script tag before adding this js code
	jQuery(document).ready(function(){
jQuery("#Modal-ID-HERE").mouseenter(function(){
   jQuery("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   jQuery("body").css("overflow", "visible");
    });
});

Hope that helps.