jQuery simple modal disable scrolling

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 simplemodal. Maintenant mon client veut rendre la page originale non-scrollable pendant que la fenêtre modale est ouverte. (Évidemment, le modal doit être déplacé.)

est-ce possible?

Edit: j'ai essayé vos suggestions. Fondamentalement, il 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 pour que les bots et les utilisateurs sans JavaScript (Oui, c'est 2%) puissent ouvrir les articles. Avec le code ci-dessus il fonctionne comme prévu, mais après la fermeture du modal je dois récupérer 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;
});
13
demandé sur Peter Mortensen 2011-03-30 14:42:19

6 réponses

dans votre script pour ouvrir votre modal: 

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

et à proximité: 

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

(HTML et corps sont requis car les barres de défilement sont attachées à différentes parties du navigateur selon ce que vous utilisez)

23
répondu Alex 2012-07-31 08:54:10

le fait d'allumer et d'éteindre les barres de défilement modifie le contenu et la superposition ne couvre plus toute la fenêtre. Voici comment résoudre le problème. 

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();
    }
});
18
répondu mhenry1384 2011-06-20 19:41:04

Utiliser 

overflow:hidden

appliquez-le à la page lorsque le Dialogue modal est ouvert et supprimez-le lorsque le dialogue est détruit. CA cachera ta barre de défilement.

3
répondu Artjom Zabelin 2011-03-30 10:51:21

j'ai trouvé overflow:hidden pas si gentil car il cache le contenu derrière le recouvrement semi-transparent si la page est laminée à mi-chemin.

j'ai trouvé la solution suivante, plutôt élaborée. Il désactive le défilement de toutes les façons détectables que j'ai trouvées. Et remet la position de scrollposition directement à l'ancienne position si la page était encore scrollée d'une façon 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;
}
0
répondu Flion 2013-05-14 18:05:59

cette option fonctionne comme un charme: 

document.documentElement.style.overflow = 'hidden';
0
répondu Artur Beljajev 2013-11-16 06:01:57

Dans mon cas, dans la balise <a> param href = "#" . Donc solution: 

href="javascript:void(0);"
-1
répondu user2642330 2015-02-25 08:13:14