Bootstrap 3 modal vertical position center

Question

Il s'agit d'une question en deux parties :

1. Comment positionner la modale verticalement au centre lorsque l'on ne connaît pas la hauteur exacte de la modale ?

2. Est-il possible d'avoir la modale centrée et d'avoir overflow:auto dans le corps de la modale, mais seulement si la modale 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 de l'écran vertical, mais pour les petits contenus modaux, c'est pratiquement inutilisable.

Answer 1

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

Et ajustez un peu la classe .fade pour être sûr qu'il apparaisse sur le bord supérieur de la fenêtre, au lieu du centre.

Answer 2

1. Comment positionner la modale verticalement au centre lorsque l'on ne connaît pas la hauteur exacte de la modale ?

Pour centrer de manière absolue la modale Bootstrap 3 sans déclarer de hauteur, vous devez d'abord écraser le CSS Bootstrap en ajoutant ceci à 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 de la boîte de dialogue modale au centre de la fenêtre.

Nous devons ajouter cette requête média, sinon la marge gauche de la modale est incorrecte sur les petits appareils :

@media (max-width: 767px) {
  .modal-dialog-center { /* Edited classname 10/03/2014 */
    width: 100%;
  }
} 

Nous allons maintenant devoir ajuster sa position avec JavaScript. Pour ce faire, nous donnons à l'élément une marge négative en haut et à gauche é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) :

Complément d'information La réponse de Finik . Crédits à Se centrer sur 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;
}

Vous remarquez la marge négative à droite ? Cela supprime l'espace ajouté par inline-block. Cet espace fait que la modale saute au bas de la page @media width < 768px.

2. Est-il possible d'avoir la modale centrée et d'avoir overflow:auto dans le corps de la modale, mais seulement si la modale dépasse la hauteur de l'écran ?

Cela est possible en donnant au corps modal un overflow-y:auto et une hauteur maximale. Cela demande un peu plus de travail pour que cela fonctionne correctement. Commencez par ajouter ceci à votre feuille de style :

~~.modal-body { overflow-y: auto; } .modal-footer { margin-top: 0; }

Nous allons à nouveau utiliser jQuery pour obtenir la hauteur de la fenêtre et définir la hauteur maximale du contenu modal en premier lieu. Ensuite, nous devons définir la hauteur maximale du corps de la modale, en soustrayant le contenu de la modale avec le modal-header et le modal-footer :

$('.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 ici une démo fonctionnelle avec Bootstrap 3.0.3 : http://cdpn.io/GwvrJ EDIT : Je recommande d'utiliser plutôt la version mise à jour 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)

Answer 3

Ma solution

.modal-dialog-center {
    margin-top: 25%;
}

    <div id="waitForm" class="modal">
        <div class="modal-dialog modal-dialog-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="headerBlock" class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <span id="bodyBlock"></span>
                    <br/>
                    <p style="text-align: center">
                        <img src="@Url.Content("~/Content/images/progress-loader.gif")" alt="progress"/>
                    </p>   
                </div>
            </div>
        </div>
    </div>

Answer 4

J'ai trouvé une solution purement css ! C'est css3 cependant, ce qui signifie que ie8 ou inférieur n'est pas supporté, mais à part cela, il est testé et fonctionne sur ios, Android, ie9+, chrome, firefox, desktop safari .

J'utilise le css suivant :

.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
  width:90%;
  height:80%;
}
.modal-content {
  min-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
}
.modal-body {
  position:absolute;
  top:45px; /** height of header **/
  bottom:45px;  /** height of footer **/
  left:0;
  right:0;
  overflow-y:auto;
}
.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

Voici un violon. http://codepen.io/anon/pen/Hiskj

en sélectionnant cette réponse comme étant la bonne, car il n'y a pas de javascript lourd supplémentaire qui met le navigateur à genoux en cas de plusieurs modales.

Answer 5

Tout ce que j'ai fait dans mon cas, c'est de définir la hauteur de la modale dans mon css en connaissant la hauteur de la modale.

<div id="myModal" class="modal fade"> ... </div>

Dans mon css, j'ai mis

#myModal{
    height: 400px;
    top: calc(50% - 200px) !important;
}