jQuery simplemodal禁用滾動

Question

我有超過2000像素滾動頁面上的內容。

如果用戶點擊div滾動內容彈出一個簡單的窗口。現在我的客戶希望在模式窗口啓動時使原始頁面不可滾動。 （當然模態應該仍然可以滾動。）

這是可能的嗎？

編輯：我試過了你的建議。基本上，它的工作原理，但問題是有點複雜：

$(".foReadMoreLink a").click(function(){ 
    if ($('#modalBox').length == 0) 
    $('body').append('<div style="display:none" id="modalBox"></div>') 
    $('body').css({'overflow':'hidden'}); 
    $.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){ 
     $('#modalBox').html(data).modal({overlayClose:'true'}); 
    }) 
    return false; 
}); 

我用回假的鏈接，以便機器人和沒有JavaScript的用戶（是的，這是2％），可以打開文章。通過上面它按預期工作的代碼，但在關閉模式後，我必須回滾動但是這個代碼將無法正常工作：

$(".foReadMoreLink a").click(function(){ 
    if ($('#modalBox').length == 0) 
    $('body').append('<div style="display:none" id="modalBox"></div>') 
    $('body').css({'overflow':'hidden'}); 
    $.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){ 
     $('#modalBox').html(data).modal({onClose:function(){$('body').css({'overflow':'auto'})},overlayClose:'true'}); 
    }) 
    return false; 
}); 

Answer 1

使用

overflow:hidden 

它應用到網頁時模式對話框打開並在對話框銷燬時將其刪除。這會隱藏你的滾動條。

Answer 2

在你的腳本打開您的模式：

$("html,body").css("overflow","hidden"); 

而且在接近：

$("html,body").css("overflow","auto"); 

（需要HTML和身體的滾動條連接到根據瀏覽器的不同部分您正在使用）

Answer 3

打開和關閉滾動條會導致內容移動，覆蓋層將不再覆蓋整個窗口。以下是如何解決它。

var oldBodyMarginRight = $("body").css("margin-right"); 
$.modal(iframe, { 
    onShow: function() { 
     // Turn off scroll bars to prevent the scroll wheel from affecting the main page. Make sure turning off the scrollbars doesn't shift the position of the content. 
     // This solution works Chrome 12, Firefox 4, IE 7/8/9, and Safari 5. 
     // It turns off the scroll bars, but doesn't prevent the scrolling, in Opera 11 and Safari 5. 
     var body = $("body"); 
     var html = $("html"); 
     var oldBodyOuterWidth = body.outerWidth(true); 
     var oldScrollTop = html.scrollTop(); 
     var newBodyOuterWidth; 
     $("html").css("overflow-y", "hidden"); 
     newBodyOuterWidth = $("body").outerWidth(true); 
     body.css("margin-right", (newBodyOuterWidth - oldBodyOuterWidth + parseInt(oldBodyMarginRight)) + "px"); 
     html.scrollTop(oldScrollTop); // necessary for Firefox 
     $("#simplemodal-overlay").css("width", newBodyOuterWidth + "px") 
    }, 
    onClose: function() { 
     var html = $("html"); 
     var oldScrollTop = html.scrollTop(); // necessary for Firefox. 
     html.css("overflow-y", "").scrollTop(oldScrollTop); 
     $("body").css("margin-right", oldBodyMarginRight); 
     $.modal.close(); 
    } 
}); 

Answer 4

我發現overflow:hidden不是很好，因爲如果滾動頁面時中途它隱藏了半TRANSPARANT覆蓋後面的內容。

我想出了以下，相當複雜的解決方案。它禁用了我發現的所有可能的可檢測方式的滾動。如果頁面仍然以某種方式滾動，則將滾動位置恢復到原來的位置。

var popupOpened = false; 

function openPopup() 
{ 
    popupOpened = true; 

    //catch middle mouse click scrolling 
    $(document).bind('mousedown',disableMiddleMouseButtonScrolling); 

    //catch other kinds of scrolling 
    $(document).bind('mousewheel DOMMouseScroll wheel',disableNormalScroll); 

    //catch any other kind of scroll (though the event wont be canceled, the scrolling will be undone) 
    //IE8 needs this to be 'window'! 
    $(window).bind('scroll',disableNormalScroll); 

    $("#layover").css({"opacity" : "0.7"}).fadeIn(); 
    $("#popup").fadeIn(300,function() 
    { 
     //use document here for crossbrowser scrolltop! 
     oldScrollTop = $(document).scrollTop(); 
    }); 
} 

function closePopup() 
{ 
    popupOpened = false; 
    $("#layover").fadeOut(); 
    $("#popup").fadeOut(300,function(){ 
     $(document).unbind('mousedown',disableMiddleMouseButtonScrolling); 
     $(document).unbind('mousewheel DOMMouseScroll wheel',disableNormalScroll); 
     $(window).unbind('scroll',disableNormalScroll); 
    }); 
} 

function disableMiddleMouseButtonScrolling(e) 
{ 
    if(e.which == 2) 
    { 
     e.preventDefault(); 
    } 
    return false; 
} 

function disableNormalScroll(e) 
{ 
    e.preventDefault(); 
    $('html, body').scrollTop(oldScrollTop); 
    return false; 
} 

Answer 5

該選項的工作就像一個魅力：

document.documentElement.style.overflow = 'hidden'; 

Answer 6

在我的情況在標籤<a> PARAM href = "#"。 所以解決方案是：

href="javascript:void(0);"