Prevent Background Scrolling When Displaying Popup

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 preven开发者_如何学Pythont the background from scrolling?

Example here

the 'email this quote' link to the right of the pdf screenshot.

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";

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');

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="")

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');
});

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.