Twitter Bootstrap 3 Modal avec Défilement de Corps

Je suis le mouvement de Bootstrap 2 à Bootstrap 3. Dans l'ancienne version, j'ai été en utilisant les auxiliaires modaux qui a longtemps contenu, et les auxiliaires modaux défile automatiquement lorsqu'une hauteur maximum a été atteint.

Dans le Bootstrap 3, le modal juste s'étend pour afficher l'intégralité du contenu, et je dois utiliser la touche page suivante pour réellement obtenir à la fin de celui-ci et de voir les boutons dans la modale de pied de page. Je ne peux pas utiliser la barre de défilement à droite de la fenêtre du navigateur, car il est couvert par la toile de fond, et en tout cas qui ne seraient pas intuitif pour faire défiler juste le contenu de la modal box.

Comment puis-je obtenir un modal dans le bootstrap 3 qui insère automatiquement une barre de défilement pour faire défiler le contenu lorsque la hauteur maximale est atteinte?

J'ai essayé de réglage de la hauteur maximum de la classe modale, comme ceci:

.modal{
   max-height:80%;
}
.modal-header{
   height:15% !important;    
}
.modal-body{
   height:70%;
   overflow:auto;
}
.modal-footer{
   height:15%;
}

Mais il ne fonctionne pas comme prévu. La fenêtre modale ne atteindre une taille maximale, mais il coupe juste son contenu et le pied de page n'est même pas affiché.

Merci pour toute aide.

  • J'ai mis à jour ma réponse.
InformationsquelleAutor Vero | 2014-11-07
  1. 72

    Juste ajouter:

    .modal-content {
  height:250px;
  overflow:auto;
}

    La hauteur peut bien sûr être adaptés à vos besoins personnels.

    Exemple

    Mise à jour:

    C'est en fait assez facile. Juste ajouter:

    .modal-body {
    max-height: calc(100vh - 212px);
    overflow-y: auto;
}

    à votre css.

    Il utilise vh et calc, qui ont également une bonne prise en charge du navigateur (IE9+).

    C'est sur cette base réponse. Veuillez lire il pour de plus amples informations, je ne vais pas la copie de sa réponse.

    Exemple

    • Merci pour la réponse. Je l'ai essayé. Il fait défiler l'en-tête et pied de page de la feuille modale aussi, je veux l'en-tête et pied de page de la feuille modale pour rester visible en tout temps, comme il l'a été dans le bootstrap 2, et seulement faire défiler le contenu à l'intérieur. Cela provoque également des problèmes avec les auxiliaires modaux qui ont moins de contenu depuis le modal affiche toujours à la hauteur fixe avec l'espace blanc en bas.
    • Je vais le regarder.
    • Merci!!!! Cela a très bien fonctionné. J'ai seulement utilisé le code à partir de la mise à jour, et j'ai ajouté overflow-x:hidden; pour éviter une barre de défilement horizontale dans le menu contextuel.
    • Pour d'autres personnes qui se demandent ce que l' 212px veux dire, c'est la hauteur de la somme de la modal-header et modal-footer
    • Si vous arrive d'être en utilisant MOINS et d'avoir des problèmes avec cette fonction, reportez-vous à stackoverflow.com/questions/11972084/....
    • génial +1.......

    InformationsquelleAutor Sebsemillia
  2. 2

    Si vous avez du contenu dynamique, cela peut être une douleur. J'ai utilisé cela pour s'assurer qu'il a la bonne hauteur, et alors il serait de défilement:

    $('#modal').on('shown.bs.modal', function () {
  $('.modal-dialog').css('height', $('.modal-dialog').height() );
});

$('#modal').on('hidden.bs.modal', function () {
  $('.modal-dialog').css('height', 'auto');
});
    • C'est à cette condition que j'ai essayé de résoudre. Merci!
    InformationsquelleAutor unclejam
  3. 0

    Vous semblez décrire https://github.com/twbs/bootstrap/issues/14916 ("superposition Modale est au-dessus de la barre de défilement "), qui sera fixé dans le Bootstrap v3.3.1 par https://github.com/twbs/bootstrap/pull/14927 ("Fix modal toile de fond superposition modale de la barre de défilement").

    InformationsquelleAutor cvrebert