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:
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
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:
@media (max-width: 767px) {
.modal-dialog-center { /* Edited classname 10/03/2014 */
width: 100%;
}
}
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.
$('.modal').on('shown.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
Mise à jour (01/10/2015):
Ajout de la réponse de Finik . Crédits à Centrer dans l'inconnu .
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
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:
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
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:
$('.modal').on('shown.bs.modal', function() {
var contentHeight = $(window).height() - 60;
var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;
$(this).find('.modal-content').css({
'max-height': function () {
return contentHeight;
}
});
$(this).find('.modal-body').css({
'max-height': function () {
return (contentHeight - (headerHeight + footerHeight));
}
});
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
Vous pouvez trouver une démonstration de travail ici avec Bootstrap 3.0.3: http://cdpn.io/GwvrJ
EDIT: je recommande d'utiliser la version mise à jour à la place pour une solution plus réactive: http://cdpn.io/mKfCc
Mise à jour (30/11/2015):
function setModalMaxHeight(element) {
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() < 768 ? 20 : 60;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight = contentHeight - (headerHeight + footerHeight);
this.$content.css({
'overflow': 'hidden'
});
this.$element
.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}
$('.modal').on('show.bs.modal', function() {
$(this).show();
setModalMaxHeight(this);
});
$(window).resize(function() {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});
(Mis à jour le 30/11/2015 http://cdpn.io/mKfCc avec la modification ci-dessus)