C'est une question en deux parties:
Comment pouvez-vous positionner le modal verticalement au centre lorsque vous ne connaissez pas la hauteur exacte du modal?
Est-il possible d'avoir le modal centré et d'avoir un débordement: auto dans le corps modal, mais seulement si le modal dépasse la hauteur de l'écran?
J'ai essayé d'utiliser ceci:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
Cela me donne le résultat dont j'ai besoin lorsque le contenu est beaucoup plus grand que la taille d'écran verticale, mais pour les petits contenus modaux, c'est à peu près inutilisable.
css
twitter-bootstrap
modal-dialog
center
scooterlord
la source
la source
Réponses:
Et ajustez un peu la classe .fade pour vous assurer qu'elle apparaît hors de la bordure supérieure de la fenêtre, au lieu du centre
la source
1. Comment pouvez-vous positionner le modal verticalement au centre lorsque vous ne connaissez pas la hauteur exacte du modal?
Pour centrer de manière absolue le Bootstrap 3 Modal sans déclarer de hauteur, vous devrez d'abord remplacer le CSS Bootstrap en l'ajoutant à votre feuille de style:Cela positionnera le coin supérieur gauche des boîtes de dialogue modales au centre de la fenêtre.
Nous devons ajouter cette requête multimédia ou bien la marge modale gauche est incorrecte sur les petits appareils:
Nous devons maintenant ajuster sa position avec JavaScript. Pour ce faire, nous donnons à l'élément une marge supérieure et gauche négative égale à la moitié de sa hauteur et de sa largeur. Dans cet exemple, nous utiliserons jQuery car il est disponible avec Bootstrap.
Mise à jour (01/10/2015):
Ajout de la réponse de Finik . Crédits à Centrer dans l'inconnu .
Remarquez la marge négative à droite? Cela supprime l'espace ajouté par inline-block. Cet espace fait sauter le modal au bas de la page @ largeur <media 768px.
2. Est-il possible d'avoir le modal centré et d'avoir un débordement: auto dans le corps modal, mais seulement si le modal dépasse la hauteur de l'écran?
Ceci est possible en donnant au corps modal un débordement-y: auto et une hauteur max. Cela prend un peu plus de travail pour le faire fonctionner correctement. Commencez par ajouter ceci à votre feuille de style:Nous utiliserons à nouveau jQuery pour obtenir la hauteur de la fenêtre et définir d'abord la hauteur maximale du contenu modal. Ensuite, nous devons définir la hauteur maximale du corps modal, en soustrayant le contenu modal avec l'en-tête modal et le pied de page modal:
Vous pouvez trouver une démonstration de travail ici avec Bootstrap 3.0.3: http://cdpn.io/GwvrJEDIT: je recommande d'utiliser la version mise à jour à la place pour une solution plus réactive: http://cdpn.io/mKfCcMise à jour (30/11/2015):
(Mis à jour le 30/11/2015 http://cdpn.io/mKfCc avec la modification ci-dessus)
la source
Ma solution
la source
Il peut simplement être réparé avec
display: flex
Avec préfixe
la source
Je suis venu avec une pure solution CSS! C'est css3 cependant, ce qui signifie que ie8 ou inférieur n'est pas pris en charge, mais à part cela, il est testé et fonctionne sur ios, android, ie9 +, chrome, firefox, desktop safari ..
J'utilise le CSS suivant:
Voici un violon. http://codepen.io/anon/pen/Hiskj
..sélectionnez cela comme la bonne réponse car il n'y a pas de javascript extra lourd qui met le navigateur à genoux en cas de plusieurs modaux.
la source
Si vous êtes d'accord avec l'utilisation de flexbox, cela devrait aider à le résoudre.
la source
pointer-events: none
à.modal-dialog
etpointer-events: auto
à.modal-content
. Becausu.modal-dialog {height: 100%}
couvre toute la colonne au-dessus et en dessous d'un modal et empêche les utilisateurs de cliquer sur le fond de cette zone.Ma solution:
la source
Tout ce que j'ai fait dans mon cas c'est de mettre le Top dans mon css en connaissant la hauteur du modal
<div id="myModal" class="modal fade"> ... </div>
dans mon css je mets
la source
L'ajout de ce simple css fonctionne également.
la source
Il existe un moyen le plus simple de le faire en utilisant css:
C'est tout. Notez qu'il suffit de l'appliquer à la
.modal-dialog
division de conteneur.Démo: https://jsfiddle.net/darioferrer/0ueu4dmy/
la source
Développant l'excellente réponse de @ Finik, ce correctif n'est appliqué qu'aux appareils non mobiles. J'ai testé dans IE8, Chrome et Firefox 22 - cela fonctionne avec un contenu très long ou court.
la source
La solution la plus universelle que j'ai écrite. Dynamicaly calcule avec la hauteur du dialogue. (L'étape suivante pourrait être de recalculer la hauteur des boîtes de dialogue lors du redimensionnement de la fenêtre.)
JSfiddle: http://jsfiddle.net/8Fvg9/3/
la source
J'ai trouvé la solution parfaite d' ici
la source
la source
@$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
Voici une autre méthode uniquement CSS qui fonctionne plutôt bien et est basée sur ceci: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
toupet:
la source
transform
solutions, le problème se pose lorsque le modal a un contenu défilable (plus de contenu qu'il n'y a de contenu dans la fenêtre)j'ai téléchargé bootstrap3-dialog à partir du lien ci-dessous et modifié la fonction ouverte dans bootstrap-dialog.js
https://github.com/nakupanda/bootstrap3-dialog
Code
Css
la source
Cela fonctionne pour moi:
la source
Essayez quelque chose comme ceci:
la source
Vous voudrez peut-être consulter cette collection de méthodes de centrage absolu d'un div: http://codepen.io/shshaw/full/gEiDt
la source
Une manière simple. Travaille pour moi. Thks rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/
la source
encore une autre solution qui définira une position valide pour chaque modal visible sur
window.resize
événement et surshow.bs.modal
:la source
la source
Je sais qu'il est un peu tard, mais j'ajoute une nouvelle réponse pour qu'elle ne se perde pas dans la foule. Il s'agit d'une solution de navigateur mobile sur plusieurs postes de travail qui fonctionne partout comme il se doit.
Il a juste besoin
modal-dialog
d'être enveloppé dans unemodal-dialog-wrap
classe et doit avoir les ajouts de code suivants:La boîte de dialogue démarre centrée et en cas de contenu volumineux, elle se développe simplement verticalement jusqu'à ce qu'une barre de défilement apparaisse.
Voici un violon de travail pour votre plaisir!
https://jsfiddle.net/v6u82mvu/1/
la source
Ceci est assez ancien et demande spécifiquement une solution utilisant Bootstrap 3, mais pour tous ceux qui se demandent: à partir de Bootstrap 4, il existe une solution intégrée appelée
.modal-dialog-centered
. Voici le problème: https://github.com/twbs/bootstrap/issues/23638Donc, en utilisant la v4, il vous suffit d'ajouter
.modal-dialog-centered
à.modal-dialog
pour centrer verticalement le modal:la source
Pensez à utiliser le plugin bootstrap-modal trouvé ici - https://github.com/jschr/bootstrap-modal
Le plugin centrera tous vos modaux
la source
Pour le centrage, je ne comprends pas ce que sont les solutions trop compliquées. bootstrap le centre déjà horizontalement pour vous, vous n'avez donc pas besoin de jouer avec cela. Ma solution consiste simplement à définir une marge supérieure uniquement à l'aide de jQuery.
J'ai utilisé l'événement Load.bs.modal pendant le chargement à distance du contenu et l'utilisation de l'événement shown.ba.modal entraîne un calcul incorrect de la hauteur. Vous pouvez bien sûr ajouter un événement pour la fenêtre en cours de redimensionnement si vous en avez besoin pour être aussi réactif.
la source
Moyen très très simple de réaliser ce concept et vous obtiendrez toujours le modal dans le moddle de votre écran par css comme fllow: http://jsfiddle.net/jy0zc2jc/1/
vous devez simplement
modal
afficher la classe sous forme de tableau en suivant css:et
modal-dialog
commedisplay:table-cell
voir l'exemple de travail complet dans un violon donné
la source
ce n'est pas si compliqué.
veuillez essayer ceci:
la source
Utilisez ce script simple qui centre les modaux.
Si vous le souhaitez, vous pouvez définir une classe personnalisée (ex: .modal.modal-vcenter au lieu de .modal) pour limiter la fonctionnalité uniquement à certains modaux.
Ajoutez également ce correctif CSS pour l'espacement horizontal du modal; nous montrons le défilement sur les modaux, le défilement du corps est masqué automatiquement par Bootstrap:
la source
Dans une installation mobile, cela peut sembler un peu différent, voici mon code.
la source