显示弹出窗口时防止背景滚动

Question

我有一个弹出窗口中显示的表单.加载后,背景显示为灰色,但用户仍可以上下滚动背景内容.

如何防止背景滚动？

这里的例子

pdf屏幕截图右侧的'发送此报价'链接.

Answer 1

打开弹出窗口时隐藏正文的滚动条

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

并在关闭弹出窗口时恢复

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

Answer 2

一个选项是暂时将overflow属性设置为hiddenon body,这将消除滚动条但在调整页面时会产生一个小的闪烁.

另一个选择是点击$(window).scroll()事件并从那里返回false.这也会引起一些闪烁,因为浏览器对返回false语句没有那么快的反应.

您最好的办法是将您的点击事件处理程序移动到一个单独的文件并在那里进行绑定:

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

这应该可以防止页面滚动.记得在对话框关闭后删除绑定,否则页面将不再可滚动!您可以使用以下方法删除绑定:

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