Problème de défilement modal sur Twitter Bootstrap

Question

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: faire défiler 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?

Answer 1

Dans Bootstrap.css, modifiez l’attribut d’arrière-plan (position) de Modal de fixe à absolu.

Answer 2

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

avant:

 .modal {
    /* ... */
    overflow-y: auto;
}
 

après:

 .modal {
    /* ... */
    overflow-y: scroll;
}
 

Answer 3

Cette réponse a en fait deux parties, un UX d'avertissement, et une 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. 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

C'est ici: http://jsfiddle.net/ajkochanowicz/YDjsE/2/

Cette solution vous permettra également de modifier la hauteur de l' .modal et ont l' .modal-body prendre le reste de l'espace avec une barre de défilement verticale, si nécessaire.

Mise à JOUR

Notez 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.

Answer 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é" du corps de la page, 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 .modal-body " comme ceci:

.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.

Answer 5

Voici comment je l'ai fait uniquement avec CSS surchargeant certaines classes:

 .modal {
  height: 60%;

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

J'espère que ça vous aide.