web-dev-qa-db-fra.com

Twitter Bootstrap 3 Modal avec corps déroulable

Je passe de Bootstrap 2 à Bootstrap 3. Dans l’ancienne version, j’utilisais des modaux au contenu long, et les modaux défilaient automatiquement dès qu’une hauteur maximale donnée était atteinte.

Dans Bootstrap 3, le modal ne fait que s'étendre pour afficher tout le contenu, et je dois utiliser la touche de navigation vers le bas pour aller au bout et voir les boutons dans le pied de page modal. Je ne peux pas utiliser la barre de défilement à l'extrême droite de la fenêtre du navigateur, car elle est recouverte par l'arrière-plan et, dans tous les cas, il ne serait pas intuitif de faire défiler uniquement le contenu de la zone modale.

Comment puis-je obtenir un modal dans 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 définir la hauteur maximale dans 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 cela ne fonctionne pas comme prévu. La fenêtre modale atteint une taille maximale, mais elle coupe simplement son contenu et le pied de page n'est même pas affiché.

Merci pour toute aide.

csstwitter-bootstraptwitter-bootstrap-3modal-dialog
21
Vero

Il suffit d'ajouter:

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

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

Exemple de travail

Mettre à jour:

C'est en fait assez facile. Il suffit d'ajouter:

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

à vos css.

Il utilise vh et calc , qui ont également un bon support du navigateur (IE9 +).

Ceci est basé sur cette réponse . S'il vous plaît lire là pour plus d'informations détaillées, je ne vais pas copier sa réponse.

Exemple de travail

71
Sebsemillia

Si vous avez du contenu dynamique, cela peut être pénible. Je l'ai utilisé pour m'assurer qu'il avait la bonne hauteur et ensuite il défilerait:

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

$('#modal').on('hidden.bs.modal', function () {
  $('.modal-dialog').css('height', 'auto');
});
2
unclejam

Vous semblez décrire https://github.com/twbs/bootstrap/issues/14916 ("La superposition modale est au dessus de la barre de défilement"), qui sera corrigé dans Bootstrap v3.3.1 par https: // github.com/twbs/bootstrap/pull/14927 ("Correction du fond modal superposant la barre de défilement du modal").

0
cvrebert