jQuery模態彈出導致頁面滾動

Question

所以我有一個模式窗口，導致頁面向下滾動。 它將＃login-box添加到url中，但該div id不是一個設置位置。 我曾考慮過將div添加到html中，但是由於我的菜單粘滯，將導致它們滾動到該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 ，然后在導航菜單中單擊“登錄”。 模態窗口應彈出，頁面將滾動。 通過Chrome中的Firebug或dev工具的CSS。

需要幫助請叫我。

感謝您幫助我解決這一問題！

------------ CSS用於#overlay的要求--------------------------

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混合。

Answer 2

在片段鏈接上向下滾動窗口的插件導致了這種情況。 如果取消隱藏登錄菜單，則可以看到該窗口向下滾動到其原始位置。 由於這不是默認的瀏覽器行為，因此return false或event.preventDefault()不會停止此行為。 您將需要查看是否有一個可以添加到該鏈接的類，當單擊該鏈接時，該類將阻止插件滾動。

另一種選擇是不使用href屬性作為登錄窗口的ID。 將其設置為href="javascript:void(0)"或僅href="#" 。 然后使用數據屬性，例如： data-target="loginMenu"並更新您的JavaScript以從此屬性獲取ID：

var login_id = $(this).attr('data-target');