jQuery simplemodal désactiver le défilement

Question

J'ai plus de 2000 pixels de contenu défilant sur une page.

Si l'utilisateur clique sur un div, un contenu défilant apparaît dans une fenêtre simplemodale. Maintenant, mon client veut rendre la page d'origine non-défilable pendant que la fenêtre modale est en place. (Bien sûr, le modal devrait toujours être défilable.)

Est-ce encore possible?

Modifier: J'ai essayé vos suggestions. Fondamentalement, cela fonctionne, mais le problème est un peu compliqué:

$(".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; 
}); 

J'utilise return false sur les liens si les bots et les utilisateurs sans JavaScript (oui, c'est de 2%) peuvent ouvrir les articles. Avec le code ci-dessus fonctionne comme prévu, mais après la fermeture du modal je dois revoir la barre de défilement, mais ce code ne fonctionnera pas:

$(".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

Utilisez

overflow:hidden 

Appliquer à la page lorsque Le dialogue modal est ouvert et le supprime lorsque le dialogue est détruit. Cela masquera votre barre de défilement.

Answer 2

Dans votre script pour ouvrir votre modal:

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

Et à proximité:

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

(HTML et le corps sont nécessaires comme les barres de défilement sont attachées à différentes parties du navigateur, selon que vous utilisez)

Answer 3

Si vous activez et désactivez les barres de défilement, le contenu sera déplacé et la superposition ne couvrira plus toute la fenêtre. Voici comment le réparer.

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

J'ai trouvé overflow:hidden pas agréable car il cache le contenu derrière le revêtement semi-transparant si la page est à mi-chemin défilée. Je suis venu avec la solution suivante, plutôt élaborée. Il désactive le défilement de toutes les manières détectables possibles que j'ai trouvées. Et remet la position de défilement vers l'ancienne position si la page défilait encore d'une manière ou d'une autre.

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

Cette option fonctionne comme un charme:

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

Answer 6

Dans mon cas dans la balise <a>href = "#" param. solution donc être:

href="javascript:void(0);"