jQuery simplemodal désactiver le défilement

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

Si l'utilisateur clique sur un div un défilement de contenu s'affiche dans une simplemodal fenêtre. Maintenant, mon client veut faire la page d'origine non-défilement tandis que la fenêtre modale. (Évidemment, le modal doit être encore défilement.)

Est-il même possible?

Edit: j'ai essayé de 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;
});

- Je utiliser return false sur les liens pour les robots et les utilisateurs sans JavaScript (oui, c'est 2%) peut ouvrir les articles. Avec le code ci-dessus, il fonctionne comme prévu, mais après la fermeture de l'modal-je avoir de retour de la barre de défilement, mais ce code ne fonctionne 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;
});

source d'informationauteur smds45

23

Dans votre script pour ouvrir votre modal:
```
$("html,body").css("overflow","hidden");
```
Et sur fermer:
```
$("html,body").css("overflow","auto");
```
(HTML et le corps sont nécessaires, comme les barres de défilement sont rattachés à différentes parties du navigateur selon ce que vous utilisez)

Tourner les barres de défilement sur et en dehors en résulte que le contenu de se déplacer et de la superposition de ne plus couvrir la totalité de 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();
    }
});

3

Utilisation
```
overflow:hidden
```
De l'appliquer à la page lorsque la boîte de dialogue modale est ouvert et l'enlever quand le dialogue est détruit. Cela permet de masquer votre barre de défilement.

J'ai trouvé overflow:hidden n'est pas très joli, car il masque le contenu derrière le semi-transparant superposition si la page défile à mi-chemin.

Je suis venu avec le suivant, plutôt élaborer une solution. Il désactive le défilement de tous les possibles détectable façons que j'ai trouvé. Et met le scrollposition droit en arrière à l'ancienne position si la page était encore défile en quelque sorte.

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;
}

Cette option fonctionne comme un charme:

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

-1

Dans mon cas dans la balise <a> param href = "#".
Donc solution:
```
href="javascript:void(0);"
```

Vous devez vous connecter pour publier un commentaire.