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.
精彩评论