web-dev-qa-db-fra.com

Comment activer le défilement de contenu dans un modal Bootstrap?

J'essaie d'intégrer beaucoup de texte dans une boîte modale créée à l'aide de Twitter Bootstrap, mais j'ai un problème: le contenu refuse de défiler. J'ai essayé d'ajouter overflow:scroll et overflow-y:scroll mais en vain; cela entraîne simplement l'affichage d'une barre de défilement sans permettre le défilement.

Quelle est la cause derrière cela et que puis-je faire?

htmlcsstwitter-bootstrapscroll
71
user798204

Dans Bootstrap.css, modifiez l'attribut d'arrière-plan (position) de Modal de fixed à absolute

62
jktress

Dans Bootstrap 3, vous devez changer la css classe .modal

before (bootstrap default): 

.modal {

    overflow-y: auto;
}

après (après l'avoir modifié): 

.modal {

    overflow-y: scroll;
}
41
Philipp Wirth

Cette réponse comporte en fait deux parties, un avertissement UX et une solution réelle.

Avertissement UX

Si votre modal contient tellement de choses qu'il a besoin de défiler, demandez-vous si vous devriez utiliser un modal. La taille du modal bootstrap par défaut est une assez bonne contrainte sur la quantité d'informations visuelles à contenir. En fonction de ce que vous créez, vous voudrez peut-être opter pour une nouvelle page ou un assistant.

Solution réelle

Est ici: http://jsfiddle.net/ajkochanowicz/YDjsE/2/

Cette solution vous permettra également de changer la hauteur de .modal et de laisser le .modal-body occuper l’espace restant avec une barre de défilement verticale si nécessaire.

METTRE À JOUR

Notez que dans Bootstrap 3, le modal a été remanié pour mieux gérer le contenu en débordement. Vous pourrez faire défiler le modal lui-même de haut en bas au fur et à mesure qu'il passe sous la fenêtre d'affichage.

17
Adam Grant

Définissez la hauteur pour modal-body et non pour l'ensemble du modal afin d'obtenir un défilement parfait sur l'incrustation modale. Je comprends que ça marche comme ça:

.MyModal {
    height: 450px;
    overflow-y: auto;
}

Ici, vous pouvez régler la hauteur selon vos besoins.

4
Ravindra

Si je me souviens bien, la définition de débordement: masqué sur le corps ne fonctionnait pas sur tous les navigateurs que je testais pour une bibliothèque modale que j'ai construite pour un site mobile. Plus précisément, j'avais du mal à empêcher le défilement du corps en plus du défilement modal, même lorsque je mettais un débordement: caché sur le corps.

Pour mon site actuel, j'ai fini par faire quelque chose comme ça. En gros, il enregistre simplement votre position de défilement actuelle en plus de définir "débordement" sur "masqué" sur le corps de la page, puis restaure la position de défilement après la fermeture du modal. Il existe une condition pour le moment où un autre modal d'amorçage s'ouvre alors que l'un est déjà actif. Sinon, le reste du code devrait être explicite. Notez que si le débordement: masqué sur le corps n'empêche pas la fenêtre de défiler pour un navigateur donné, cette opération rétablit au moins l'emplacement de défilement d'origine à la sortie.

function bindBootstrapModalEvents() {
    var $body = $('body'),
        curPos = 0,
        isOpened = false,
        isOpenedTwice = false;
    $body.off('shown.bs.modal hidden.bs.modal', '.modal');
    $body.on('shown.bs.modal', '.modal', function () {
        if (isOpened) {
            isOpenedTwice = true;
        } else {
            isOpened = true;
            curPos = $(window).scrollTop();
            $body.css('overflow', 'hidden');
        }
    });
    $body.on('hidden.bs.modal', '.modal', function () {
        if (!isOpenedTwice) {
            $(window).scrollTop(curPos);
            $body.css('overflow', 'visible');
            isOpened = false;
        }
        isOpenedTwice = false;
    });
}

Si vous n’aimez pas cela, l’autre option serait d’attribuer une hauteur maximale et un débordement: auto à .modal-body comme suit:

.modal-body {
  max-height:300px;
  overflow:auto;
}

Dans ce cas, vous pouvez configurer la hauteur maximale pour différentes tailles d'écran et laisser le débordement: auto pour différentes tailles d'écran. Vous devez toutefois vous assurer que l'en-tête, le pied de page et le corps modaux ne correspondent pas plus à la taille de l'écran, alors j'inclurais cette partie dans vos calculs.

4
Daniel

Lorsque vous utilisez Bootstrap modal avec skrollr, le modal ne pourra plus défiler. 

Problème résolu avec l'arrêt de la propagation de l'événement tactile. 

$('#modalFooter').on('touchstart touchmove touchend', function(e) {
    e.stopPropagation();
});

plus de détails at Ajouter un événement de défilement à l'élément à l'intérieur de # skrollr-body

2
ken

Voici comment je l'ai fait uniquement avec CSS qui redéfinissait certaines classes

.modal {
  height: 60%;

  .modal-body {
    height: 80%;
    overflow-y: scroll;
  }
}

J'espère que ça vous aide.

2
Alejandro García Iglesias

En fait, pour Bootstrap 3, vous devez également remplacer la classe .modal-open sur body.

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }
1
Jmorvan

J'ai eu le même problème et j'ai trouvé un correctif comme ci-dessous:

$('.yourModalClassOr#ID').on('shown.bs.modal', function (e) {
    $(' yourModalClassOr#ID ').css("max-height", $(window).height());
    $(' yourModalClassOr#ID ').css("overflow-y", "scroll");          /*Important*/
    $(' yourModalClassOr#ID ').modal('handleUpdate');

});

100% de travail.

1
Amin Bakhtiari Far
.modal-body {
    max-height: 80vh;
    overflow-y: scroll;
}

ça marche pour moi

1
Ivan Komarov

Je rencontre ce problème sur Mobile Safari sur mon iPhone6

Bootstrap ajoute la classe .modal-open au corps lorsqu'un modal est ouvert.

J'ai essayé de remplacer minimal Bootstrap 3.2.0 par les modifications suivantes:

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

À titre de comparaison, j'ai inclus les styles Bootstrap associés ci-dessous.

Extrait sélectionné de bootstrap/less/modals.less (ne l'incluez pas dans votre correction):

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

Version de Safari mobile utilisée: User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

1
ptim

J'ai pu surmonter ce problème en utilisant la métrique "vh" avec max-height sur l'élément .modal-body. 70vh a regardé à peu près juste pour mes utilisations.

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}
1
Keith.Abramo

Après avoir utilisé toutes ces solutions mentionnées, je n’étais toujours pas en mesure de faire défiler à l’aide de la souris, le bouton haut/bas du clavier fonctionnait pour faire défiler le contenu.

Donc, j'ai ajouté ci-dessous des correctifs CSS pour le faire fonctionner

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    **pointer-events: auto;**
}

Ajouté pointeur-événements: auto; pour le faire défiler à la souris.

0
Ritesh Kashyap

Bootstrap ajoutera ou supprimera un "modal-open" CSS à la balise <body> lorsque nous ouvrirons ou fermerons un modal. Donc, si vous ouvrez plusieurs modaux puis fermez un arbitraire, le fichier CSS à ouverture modale sera supprimé de la balise body.

Mais l'effet de défilement dépend de l'attribut "overflow-y: auto;" défini dans modal-open

0
Nick