Comment faire pour limiter la hauteur de l'modal?

Je suis à la recherche d'un moyen de garder une boîte de dialogue modale dans les limites de l'écran, c'est à dire que sa hauteur est toujours inférieure à la hauteur de l'écran et 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:

Comment faire pour limiter la hauteur de l'modal?

Je préfère un pur CSS solution (pas de js) si elle existe. Pour plus de clarté, je suis à la recherche de max-hauteur, pas à la hauteur (c'est à dire le modal est pas plus grand que l'écran, le laisser tel quel).

  • Aucune raison de ne pas utiliser un autre plugin jQuery? Googler "responsive modal" tourne beaucoup d'options, et je suis sûr à 99% que l'un d'eux serait de répondre à vos besoins
InformationsquelleAutor georg | 2015-03-01
  1. 54

    Utilisation fenêtre d'affichage des unités de avec calc. Comme ceci:

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

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

    Aussi, afin de prendre soin de la largeur de la modale nous avons besoin de mettre un peu plus de propriétés:

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

    Mis À Jour Le Violon (Redimensionner la fenêtre d'affichage de la hauteur pour voir l'effet)

    Sinon:

    Nous pouvons remplacer calc avec un rembourrage + marge négative de la technique comme suit:

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

    VIOLON

    PS: prise en charge du navigateur pour la fenêtre d'affichage des unités est très bon

    • Oh wow. Je n'avais aucune idée de comment bonne prise en charge du navigateur est devenu - pour la fenêtre d'affichage unités ainsi que calc().
    • Je n'aime pas calc pour l'image. Est-il possible de se débarrasser de lui?
    • Vous pouvez utiliser quelque chose de moins que 100vh (pleine hauteur de la fenêtre d'affichage), comme 90vh, bien que cela puisse varier d'un appareil à l'autre..
    • Partiellement masquer l'image si de petits - test: jsfiddle.net/ma4zn5gv/7
    • J'ai mis à jour cette réponse avec une approche qui n'utilise pas de calc
    • Pardonnez mon ignorance, mais où 225px dans la première solution et qu'est-ce que 113px dans la seconde? Si je change les polices et les marges dois-je recalculer ces chiffres?
    • Nous voulons que l'image pour remplir l'écran à la verticale, tout en laissant assez de place pour les sections supérieure et inférieure de la boîte de dialogue plus le haut et le bas de la boîte de dialogue wrt. l'écran. Ainsi, la valeur 225px est juste un exemple. La valeur doit être ajustée en fonction de la taille que vous souhaitez que la boîte de dialogue de wrt. la hauteur de l'écran
    • Je vous remercie j'ai un nouvel éclairage dans calc(100vh - 225px); 😀

    InformationsquelleAutor Danield
  2. 3

    Puisque la valeur par défaut définie sur automatique et 100% en largeur et en hauteur. vous venez d'être en mesure de les modifier; l'image à l'intérieur de la fenêtre d'affichage et l'ID de la 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 séparer en, 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;
}

    Mis à JOUR DÉMO:

    • si vous réglez l'image en img-responsive, les changements dans les .modale de dialogue img que les codes ci-dessus ne donnera pas mauvais affichage en largeur et en hauteur
    InformationsquelleAutor Herman Nz
  3. 2

    Si vous assurer que le parent éléments ont une hauteur définie, alors vous devriez être en mesure de le faire assez facilement. J'ai donné l'en-tête et pied de page 10 pour cent des hauteurs entendre et le corps de 80 pour cent de sorte que tout cela s'ajoute à 100 🙂

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

}
.modal-header, .modal-footer {height:10%;}
.modal-body {height:80%;}
.img-responsive {
    max-height:100%;
}
    • L'image se développe toujours de modèle en Chrome et Firefox: jsFiddle
    • ahh désolé à ce sujet. le paragraphe devrait aussi avoir la hauteur de 100%. J'ai mis à jour le code ici. jsFiddle .modal-content p{ height: 100%; }
    • Aussi, si la plus externe de la mère de la modale est réglé sur max-hauteur, puis le modèle doit presser à l'intérieur aussi bien. Il est tout au sujet de s'assurer que tout le premier parent est définie uniquement être aussi grand que le navigateur.
    InformationsquelleAutor Achilles
  4. 2

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

    Violon

    InformationsquelleAutor Richie Fredicson
  5. 1

    Si vous fournissez max-height et max-width à 100% alors il prendra automatiquement en conséquence de l'écran mais que vous voulez de cette boîte de dialogue plus petite taille, alors vous aurez à définir max-height et max-width à des correctifs de valeur.
    Comme vous l'avez déjà utilisé responsive modèle de boîte de dialogue de sorte qu'il sera de dialogue de modification automatique de la taille que par la taille de votre écran.

    Essayez de suivre css il peut travailler selon vos besoins. vous pouvez modifier le max-height et max-width en conséquence, margin-left et margin-right utilisé pour le centre d'aligner.

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

    Espère que ça peut vous aider.!!

    InformationsquelleAutor Ranjitsinh
  6. 1

    Essayer de travailler Violon avec certains css changements.

    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;
}
    • l'image tourne à gauche :p
    • merci de regarder ce jsfiddle.net/ma4zn5gv/54
    • la coopérative doit limiter la modale de dialogue, pas de l'image 😀
    InformationsquelleAutor Amit
  7. 1

    Fixer la taille du conteneur d'abord, puis de définir modale de dialogue taille.

    Par exemple:

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

    Violon

    InformationsquelleAutor Kanti
  8. 1

    Cible la modal-body et pas le modal-dialog.

    D'ajouter ceci dans votre CSS:

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

    Il devrait ressembler à ceci:

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

    Ajuster le VH à hauteur de la préférence.

    InformationsquelleAutor Juan J
  9. 0

    Je pense que vous devriez utiliser overflow: hidden sur .modale de dialogue, avec un style à mantain l'image de la proportion.

    InformationsquelleAutor David Vartanian