jquery模式彈出導致頁面滾動

所以我有一個模式窗口，導致頁面向下滾動。它將＃登錄框添加到url，但該div id不是一個設置的地方。我想添加一個div到html中，但這不起作用，因爲我的菜單很粘，並且會導致它們滾動到div的任何位置。jquery模式彈出導致頁面滾動

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中的螢火蟲或開發工具使用CSS。

讓我知道你是否需要別的東西。

感謝您幫我分揀出來！

------------ CSS for #overlay as requested --------------------------

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

來源

2014-01-29 John_911

什麼風格有#overlay DIV？尤其是身高。 –

不確定你的意思。你的意思是#overlay的css是什麼？要麼？ –

是的，正好... –

要停止滾動的頁面上，創建這個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混合。

來源

2014-01-29 22:17:32

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

另一種選擇是不使用href屬性作爲登錄窗口的ID。使其成爲href="javascript:void(0)"或僅僅href="#"。然後使用等的數據屬性：data-target="loginMenu"和更新JavaScript抓住從這個屬性ID：

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

來源

2014-01-29 22:40:11 TJSimons

jquery模式彈出導致頁面滾動

回答

相關問題