Resolving Background Scrolling Issue Of Modal Popup Vew In Mobile Devices

Problem: While dealing with a scrollable view where a large numbers of data are shown I faced the following issue. When a popup shows above it, the background scrollable view still has focus and can be  scrolled in mobile devices. After much of the research I got the solution and I am sharing it below

One line resolution: To block this we need to handle the touch event on the overlay screen.

Implementation:
Lets assume the html for the popup screen as follows:

       

           

Your Content goes over here

So we need to handle the “touchstart” event on the “customOverlay”,

$('.customOverlay').bind('touchstart', function(event) {

event.preventDefault()

return;

});

If we need to hide the tapping highlight effect also then just make a class with below css,

 .preventTappingHighlight

 -webkit-tap-highlight-color: rgba(255,255,255,0);

-webkit-user-modify: read-write-plaintext-only;                       

 -webkit-user-select: none;              

      }

Then on the function that shows the popup, add the class to each element as below:

$('*').addClass('preventTappingHighlight');

and, on the function which closes the popup, add remove that class as below:

$('*').removeClass('preventTappingHighlight');

This prevents the scrolling of the background view as well as the background view containing the input fields being highlighted.