Prevent Background Scrolling When Displaying Popup

Question

I have a form that is displayed in a popup. After loading, the background is grayed out, but the user can still scroll the background content up and down.

How do I

Answer 1

One option is to temporarily set the overflow property to hidden on body, that will get rid of the scroll bars but causes a small flicker when the page is adjusted.

The other choice is to tap onto the $(window).scroll() event and return false from there. That will also cause a bit of flicker as the browser doesn't react that fast to the return false statement.

Your best bet is to move your click event handlers to a separate file and do the binding there:

$(function() {
    $('.emailPost').click(function() {
        $(window).scroll(function() { return false; });
        pageTracker._trackPageview('/onclick/emailquote');            
    });
});

That should prevent a page from scrolling. Remember to remove the bind after the dialog closes, otherwise the page won't be scrollable anymore! You can remove binds using:

$(window).unbind('scroll');

Answer 2

This code block works for IOS mobile devices where the scroll issue is very common.

$('body').on('touchmove', function(e) {
    if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();
});
$('body').on('shown.bs.modal', function() {
    $(this).addClass('scroll-disable');
});
$('body').on('hidden.bs.modal', function() {
    $(this).removeClass('scroll-disable');
});

Answer 3

To hide the scrollbar of the body when opening the popup

document.body.style.overflow = "hidden";

and to revert back when closing the popup

document.body.style.overflow = "visible";

Answer 4

If you are using it like this

<a href="#targetid">Open Model</a> 

(#tragetid) is the div popup id.

You can use and replace href="" with data-mfp-src="". It's working perfectly.

Answer 5

Don't use the # tag in your links!

It will try to to scroll to the anchor # but because it's empty it will scroll to the top of the page.

Edit your links to:

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

(notice the href="")