javascript - Jquery 模态弹出导致页面滚动

Question

所以我有一个导致页面向下滚动的模态窗口。它将 #login-box 添加到 url，但该 div id 不是固定位置。我考虑过在 html 中添加一个 div，但这行不通，因为我的菜单是粘性的，它会导致它们滚动到 div 所在的位置。

http://onecraftyshop.com然后单击导航菜单中的“登录”。你会明白我在说什么。然后向下滚动并再次单击它，无论您在页面上的哪个位置，oyu 都会看到它向下滚动。

这里是模态窗口的相关JS:

// Load the modal window
$('a.login-window').click(function() {

    // Get the value in the href of our button.
    var login_id = $(this).attr('href');

    // Add our overlay to the body and fade it in.
    $('body').append('<div id="overlay"></div>');
    $('#overlay').fadeIn(300);

    // Fade in the modal window.
    $(login_id).fadeIn(300);

    // center our modal window with the browsers.
    var margin_left = ($(login_id).width() + 24) / 2;
    var margin_top = ($(login_id).height() + 24) / 2;

    $(login_id).css({
        'margin-left' : -margin_left,
        'margin-top' : -margin_top
    });

    return false;
});

我试着改变

var margin_top = ($(login_id).height() + 24)/2; 到

var margin_top = ($(login_id).height() + 24)/.7; 这停止了滚动，但框没有居中(它实际上在顶部被切断页面的)然后我想“哦，很简单，只要用 css 改变定位”，但那会导致它再次开始滚动!

访问http://onecraftyshop.com然后单击导航菜单中的“登录”。模态窗口应该弹出，页面将滚动。 CSS 通过 firebug 或 chrome 中的开发工具。

如果您还需要什么，请告诉我。

感谢您帮我解决这个问题!

------------根据要求为#overlay 提供 CSS------------------------

background: none repeat scroll 0 0 #000000;
height: 100%;
left: 0;
opacity: 0.8;
position: fixed;
top: 0;
width: 100%;
z-index: 9999999;

Answer 1

要停止在页面上滚动，创建这个 javascript 函数(用纯 javascript 编写):

scrollingToggleIterates = 0;
function toggleScrolling(event){
    if(scrollingToggleIterates%2 == 0){
        var scrollPosition = document.documentElement.scrollTop;
        document.body.className = 'stopScrolling';
        document.documentElement.scrollTop = scrollPosition;
    }
    else{
        var scrollPosition = document.documentElement.scrollTop;
        document.body.className = '';
        document.documentElement.scrollTop = scrollPosition;
    }
    scrollingToggleIterates++;
}

然后将这个类添加到您的 css 中:

.stopScrolling{
  height: 100%;
  overflow:hidden;
}

当你想防止滚动时调用 toggleScrolling 函数，然后当你想重新启动它时再次调用该函数。我知道您正在使用 JQuery，但您应该能够将它与纯 JS 混合使用。