Prevent scrolling of the page when pop-up is open

Solution#1 

On modal popup open add following css

body {
    overflow: hidden;
}

On popup close

body {
    overflow: auto;
}

Solution#2 

On modal popup open add following css

body {
    position: fixed;
}

On popup close

body {
    position: relative;
}

Solution#3 

On modal popup open add following css

body {
overflow: hidden;
        position: fixed;
}

On popup close

body {
overflow: auto;
        position: relative;
}

Solution#4 

On modal popup open add following css

   $('body').css('overflow', 'hidden').on('touchmove', function(e) {
         e.preventDefault();
    });

On popup close

$('body').css('overflow', 'auto').off('touchmove');

Solution#5

Prevent scrolling on iphone

html, body {
height: 100%;
        overflow: hidden;
position: fixed;
}

For more information, You can look following stack-overflow links

Prevent content from overflowing in mobile-browsers

Prevent scroll of the page if pop-up is open

Prevent page scrolling

Prevent scrolling on only certain pages in jquery

overflow xhidden doesnt prevent content from overflowing in mobile browsers