[ACCEPTED]-Prevent Background Scrolling When Displaying Popup-popup

Accepted answer

Score: 31

To hide the scrollbar of the body when opening 2 the popup

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

and to revert back when closing 1 the popup

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

Score: 17

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

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

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

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

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

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

Score: 0

Don't use the # tag in your links!

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

Edit your links to:

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

(notice the 1 href="")

Score: 0

This code block works for IOS mobile devices 1 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');
});

Source: stackoverflow.com

[ACCEPTED]-Prevent Background Scrolling When Displaying Popup-popup

How to edit the element.style css?

javascript (window.open) opens maximized in all browsers but not in chrome

Popup on website load once per session

Rails 3.2 Modal popup on show action

Leaflet Mouseout called on MouseOver event

How to open JQuery UI popup onclick

Window.Open POST

js open popup window and acces its element in another page

Bootstrap modal and cookie

Open link in Popup Window with Javascript