Comment faire pour activer le défilement de contenu à l'intérieur d'un modal?

Je vais essayer de répondre à beaucoup de texte dans une modal box créé à l'aide de Twitter Bootstrap, mais je vais avoir un problème: que le contenu refuse de défiler.

J'ai essayé d'ajouter overflow:scroll et overflow-y:scroll, mais en vain; que provoque simplement d'afficher une barre de défilement sans activation de la vitesse de défilement.

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

  • Un collègue a gentiment suggéré de chercher body {overflow-y:scroll} et de le remplacer avec html {overflow: scroll;}. Cela a réglé le problème pour nous.
InformationsquelleAutor user798204 | 2011-09-22
  1. 63

    Dans Le Bootstrap.css modifier l'attribut background (position) de Modal de fixed à absolute

    • Je comprends Rasmus commentaire, mais pas votre réponse. "attribut background"? Certes, vous ne veux pas dire <div background="absolute" je suppose que vous voulez dire style, mais même alors, il n'est pas "fixe" de la valeur pour le style d'arrière-plan, { background-position:fixed } n'est pas valide.
    • Ce qui cause réellement le contenu modal couper pour moi. Réglage $.support.transition = false au lieu de cela rend le défilement fonctionne comme prévu, mais il n'y a pas de transitions :-/
    • Ce n'est pas un global solution utile. essayez .modal {overflow-y: scroll}
    • Cette solution est un problème si votre page a de défilement. Le modal est peut-être hors de vue avec le positionnement absolu
    InformationsquelleAutor jktress
  2. 43

    Dans le Bootstrap 3, vous devez modifier le css classe .modal

    avant (bootstrap par défaut) :

    .modal {

    overflow-y: auto;
}

    après (après modification):

    .modal {

    overflow-y: scroll;
}
    • Ils sont très différents. La première utilise l'auto-valeur, la seconde utilise le défilement de la valeur. Cela fixe, pour moi le problème.
    • "Avant" qui signifie le css .classe modale avant l'édition... Le "après" l'article montre la façon correcte pour remplacer la .classe modale.
    InformationsquelleAutor Philipp Wirth
  3. 17

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

    UX d'Avertissement

    Si votre modal contient tellement qu'il a besoin de faire défiler, demandez-vous si vous devriez être à l'aide d'un modal à tous. La taille de l'amorçage modal par défaut est une assez bonne contrainte sur la quantité d'information visuelle doit s'adapter. En fonction de ce que vous faites, vous pouvez plutôt 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 modifier la hauteur de .modal et ont la .modal-body prendre le reste de l'espace avec une barre de défilement verticale si nécessaire.

    Mise à JOUR

    Noter que dans le Bootstrap 3, le modal a été remaniée pour mieux gérer débordant de contenu. Vous serez en mesure de faire défiler le modal lui-même en haut et en bas comme il coule sous la fenêtre d'affichage.

    • Je vais avoir le même problème, et cela ne fonctionne pas sur les appareils mobiles, car elle repose sur une hauteur en pixels.
    • Pourquoi montrez-vous un modal sur un appareil mobile??
    • hmm.. il est difficile de tester cette réponse, sur le site de violon ne pas utiliser bootstrap à tous... ce qui peut expliquer certaines des principes relatifs au travail, mais le bootstrap source est tellement compliquée que je ne pense pas que c'est si utile que sans appliquer les principes à défaut BS balisage.
    • Ce peut être mis à jour pour la dernière version de bootstrap, mais dans le cas du violon, j'ai fourni, bootstrap est juste le code qui tourne autour de cela, vous ne devriez pas avoir à modifier quoi que ce soit à l'intérieur de bootstrap lui-même, juste l'élément qui contient le contenu que vous souhaitez faire défiler.
    • Je pourrais arguer que le défilement modal est un UX design d'avertissement. Considérons un simple modal affiche un list-group permettant à l'utilisateur de sélectionner l'un des 10 options affichées sur un mobile dans le paysage, une meilleure solution serait d'avoir la modal-content défiler, je n'ai pas vu de solution universelle qui fonctionne bien sur tous les appareils.
    InformationsquelleAutor Adam Grant
  4. 4

    Si je me souviens bien, le réglage overflow:hidden sur le corps ne fonctionne pas sur tous les navigateurs, j'ai été le tester pour un modal de la bibliothèque que j'ai construit pour un site mobile. Plus précisément, j'ai eu du mal à empêcher le corps de défilement en plus de la modale de défilement même quand je mets overflow:hidden sur le corps.

    Pour mon site, j'ai fini par faire quelque chose comme cela. Qu'il est fondamentalement juste les magasins de votre position de défilement en outre la définition de "dépassement" de "caché" sur la page du corps, puis restaure la position de défilement après le modal ferme. Il y a une condition pour quand un autre bootstrap modale s'ouvre alors que l'on est déjà active. Sinon, le reste du code doivent être explicites. Notez que si le overflow:hidden sur le corps n'est pas d'empêcher la fenêtre de défilement pour un navigateur donné, ce qui définit l'origine de défilement emplacement de retour à 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 consisterait à attribuer à un max-height et overflow:auto .modale du corps comme:

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

    Dans ce cas, vous pouvez configurer le max de hauteur pour différentes tailles d'écran et de laisser le overflow:auto pour les différentes tailles d'écran. Vous devez assurez-vous que le modal en-tête, pied de page, et le corps ne pas ajouter de plus que la taille de l'écran, alors je dirais que la partie dans vos calculs.

    InformationsquelleAutor Daniel
  5. 4

    Régler la hauteur pour modal-body et non pour l'ensemble de modal pour obtenir un parfait de défilement sur la superposition modale. Je reçois ce travail comme ceci:

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

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

    • Enfin, une solution! Une note pour la dynamique des modaux- height: auto; fonctionne aussi, mais modale de la hauteur est réglée sur auto de toute façon, alors, vraiment tout ce que vous avez besoin est la overflow-y: auto;. J'ai également appliqué à la .modal au lieu de choisir un seul. De nombreux tests montrent qu'il a travaillé sur tous les modal jusqu'à présent.
    InformationsquelleAutor Ravindra
  6. 2

    C'est la façon dont je l'ai fait uniquement avec du CSS primordial de certaines classes:

    .modal {
  height: 60%;

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

    Espère que cela vous aide.

    • Remarque: ci-dessus est en fait Less CSS, pas pur CSS.
    InformationsquelleAutor Alejandro García Iglesias
  7. 2

    Lors de l'utilisation de Bootstrap modal avec skrollr, le modal deviendra pas être déplacé.

    Problème fixe avec l'arrêt de l'événement tactile de se propager. 

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

    plus de détails à
    Ajouter un événement scroll à l'élément à l'intérieur de #skrollr-corps

    InformationsquelleAutor ken
  8. 1

    Fait pour Bootstrap 3 vous devez également remplacer la .modal-classe ouverte sur le corps.

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

    Je vais avoir ce problème sur Safari Mobile sur mon iPhone6

    Bootstrap ajoute la classe .modal-open pour le corps quand un modal est ouvert.

    J'ai essayé de rendre minimale de remplacements de Bootstrap 3.2.0, et est venu avec les éléments suivants:

    .modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

    Pour la comparaison, j'ai inclus les associés Bootstrap styles ci-dessous.

    Sélectionnée extrait de bootstrap/moins/modals.moins (ne pas les inclure dans votre fix):

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

    Mobile Safari version 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

    • gah 🙁 c'est en fait à l'origine le BG du site à gauche, tandis que le modal est ouvert. Je vais mettre à jour avec un correctif quand il est trié.
    • Je n'arrivais plus à reproduire ce problème, et la plaie à l'arrière de ce changement
    InformationsquelleAutor ptim
  10. 1

    J'ai eu le même problème, et trouvé un fix 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.

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

    ça fonctionne pour moi

    InformationsquelleAutor Ivan Komarov
  12. 0

    Après l'utilisation de toutes ces solution mentionnée, je n'étais pas encore capable de faire défiler à l'aide de défilement de la souris, le clavier, les touches up/down, ont travaillé pour le défilement de contenu.

    Donc, j'ai ajouté ci-dessous css fixe pour qu'il fonctionne

    .modal-open {
    overflow: hidden;
}

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

    Ajouté pointeur-événements: auto; à faire de défilement de la souris.

    InformationsquelleAutor Ritesh Kashyap
  13. 0

    J'ai été en mesure de surmonter ce à l'aide de la "vh" métrique avec max-hauteur de sur le .modale de l'élément de corps. 70vh regarda droit pour mes utilisations.

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

    Bootstrap permettra d'ajouter ou de supprimer un css "modal-open" à la <body> balise lorsque nous ouvrir ou de fermer la modale. Donc, si vous ouvrez plusieurs modal et puis fermez arbitraire, le modal-ouvrir css sera retiré de la balise body.

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

    InformationsquelleAutor Nick
  15. -2

    Solution 1: Vous pouvez déclarer .modal{ overflow-y:auto} ou .modal-open .modal{ overflow-y:auto} si vous utilisez en dessous de 3v de bootstrap (pour le haut des versions, il est déjà déclarée).

    Bootstrap ajoute modal-open classe de body afin de supprimer les barres de défilement dans le cas modal est montré, mais ne pas ajouter de classe à html qui peut aussi avoir des barres de défilement, comme un résultat de la barre de défilement de html parfois peut être trop visible, de le retirer, vous devez définir modal afficher/masquer événements et ajouter/supprimer des overflow:hidden sur html. Ici comment le faire.

    $('.modal').on('hidden.bs.modal', function () {
   $('html').css('overflow','auto');
}).on('shown.bs.modal', function () {
   $('html').css('overflow','hidden');
});

    Solution 2: Comme modale possède des fonctionnalités clés, la meilleure façon de gérer cela est de fixer la hauteur de la ou encore mieux connecter la hauteur de modal avec la hauteur de la fenêtre d'affichage comme celui -

    .modal-body {
     overflow:auto; 
     max-height: 65vh;
}

    Avec cette méthode, vous n'avez pas à gérer body et html les barres de défilement.

    Note 1: Navigateur soutien pour vh unités.

    Note 2: Comme il est proposé ci-dessus. Si vous modifiez .modal{position:fixed} à .modal{position:absolute}, mais dans le cas où la page a plus de hauteur que le modal utilisateur peut faire défiler trop de place et modal disparaîtra de la fenêtre d'affichage, ce n'est pas bon pour l'expérience utilisateur.

    InformationsquelleAutor Gagik Sargsyan