web-dev-qa-db-fra.com

Comment limiter la hauteur du modal?

Je cherche un moyen de conserver un dialogue modal dans les limites de l'écran, c'est-à-dire que sa hauteur est toujours inférieure à la hauteur de l'écran et que la largeur est ajustée en conséquence. J'ai essayé:

.modal-dialog {
  max-height: 100%;
}

mais cela ne semble pas avoir d'effet.

http://jsfiddle.net/ma4zn5gv/

Une illustration:

enter image description here

Je préfère une solution CSS pure (pas de js) si elle existe. Pour plus de clarté, je recherche la hauteur maximale et non la hauteur (le modal n’est pas plus grand que l’écran, laissez-le tel quel).

csstwitter-bootstrap-3responsive-design
24
georg

Utilisez viewport units with calc. Comme ça:

.img-responsive {
    max-height: calc(100vh - 225px);
}

... où 225px correspond à la hauteur combinée des sections supérieure et inférieure de la fenêtre qui entourent la boîte de dialogue.

En outre, afin de prendre soin de la largeur du modal, nous devons définir quelques propriétés supplémentaires:

.modal {
    text-align:center;
}
.modal-dialog {
    display: inline-block;
    width: auto;
}

Mise à jour Fiddle (Redimensionnez la hauteur de la fenêtre pour voir l'effet)

Alternativement:

Nous pouvons remplacer calc par une technique de remplissage + marge négative comme ceci:

.img-responsive {
    max-height: 100vh;
    margin: -113px 0;
    padding: 113px 0;
}

VIOLON

PS: le support du navigateur pour les unités de viewport est très bon

51
Danield

Depuis la valeur par défaut définie sur auto et 100% en largeur et en hauteur. vous pouvez juste modifier; l'image dans la fenêtre et l'ID cible, comme suit:

/*let target has the same value as modal-dialog*/
#myModal {
    width:auto;
    height:auto;
    margin:0 auto;
}
/*modify image inside modal-dialog*/
.modal-dialog,.modal-dialog img { /*same value to avoid overwidth*/
    width:70%;
    height:70%;
    margin:0 auto;
}

Voici la démo dans jsfiddle.

Vous pouvez également le séparer comme suit:

.modal-dialog img {
    width:100%;
    height:100%;
    margin:0 auto;
}
.modal-dialog {/*modify the modal-dialog*/
/*ONLY CHANGE THIS, NOT others (#myModal or .modal-image img)*/
    width:60%;
    height:60%;
    margin:0 auto;
}

MISE À JOUR DÉMO:

3
Herman Nz

Si vous vous assurez que les éléments parents ont une hauteur définie, vous devriez pouvoir le faire assez facilement. J'ai donné à l'en-tête et au pied de page 10% de hauteur et le corps à 80%, pour un total de 100 :)

.modal, .modal-dialog, .modal-content{
  height: 100%;

}
.modal-header, .modal-footer {height:10%;}
.modal-body {height:80%;}
.img-responsive {
    max-height:100%;
}
2
Achilles

Script

$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('max-height',$( window ).height()*0.8);
$('.modal-content img').css('max-height',(($( window ).height()*0.8)-86));
});

Fiddle

2
Richie Fredicson

Essayez de travailler Fiddle avec quelques modifications css.

css:

.modal-dialog {
 height: 100%;
 margin: 0;
 padding: 10px;
}
.modal-content { height:100%; }
.modal-body {
position: absolute;
padding: 15px;
left:0;
right:0;
top: 55px;
bottom: 65px;
margin: auto;
}
.modal-body > p {
height: 100%;
margin: 0;
}
.img-responsive{
max-height: 100%;
max-width: 100%;
margin:auto;
}
.modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
1
Amit

Si vous fournissez une hauteur maximale et une largeur maximale de 100%, l'écran s'affichera automatiquement, mais comme vous souhaitez réduire la taille de la boîte de dialogue, vous devrez définir une hauteur maximale et une largeur maximales. Comme vous avez déjà utilisé la boîte de dialogue de modèle sensible, la taille de la boîte de dialogue change automatiquement en fonction de la taille de votre écran. 

Essayez de suivre css, cela peut fonctionner selon vos besoins. vous pouvez modifier la hauteur maximale et la largeur maximale en conséquence, la marge gauche et la marge droite utilisées pour l'alignement au centre.

 .modal-dialog {
      max-height: 225px;
      max-width:  200px; 
      margin-left: auto;
      margin-right: auto;
    }

J'espère que cela peut vous aider. !!

1
Ranjitsinh

Ciblez le modal-body et non le modal-dialog.

Ajoutez ce qui suit à votre CSS:

max-height: 80vh;
overflow-y: auto;

Ça devrait ressembler à ça:

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

Ajustez la hauteur VH selon vos préférences. 

1
Juan J

Fixez d'abord la taille du conteneur, puis définissez la taille de la boîte de dialogue modal.

Par exemple:

.modal{height:100%;width:50%;margin: 0 auto;}
.modal-dialog{overflow:hidden; max-height:96%;}

Fiddle

1
Kanti

Je pense que vous devriez utiliser overflow: caché sur .modal-dialog, avec un style pour maintenir les proportions de l'image.

0
David Vartanian