Centrage vertical de la fenêtre modale Bootstrap

Je voudrais centrer mon modal sur la fenêtre (au milieu) J'ai essayé d'ajouter quelques propriétés css

 .modal { position: fixed; top:50%; left:50%; }   

J'utilise cet exemple http://jsfiddle.net/rniemeyer/Wjjnd/

j'ai essayé

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

Cela fait le travail: http://jsfiddle.net/sRmLV/1140/

Il utilise un helper-div et un css personnalisé. Aucun javascript ou jQuery requis.

HTML (basé sur le code de démonstration de Bootstrap )

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Parce que la réponse de gpcola n'a pas fonctionné pour moi, j'ai édité un peu pour que cela fonctionne maintenant. J'ai utilisé "margin-top" au lieu de transformer. Aussi, j'utilise l'événement "show" au lieu de "shown" car après cela m'a donné un très mauvais saut de positionnement (visible lorsque vous avez des animations bootstrap activées). Assurez-vous de régler l'affichage sur "block" avant le positionnement, sinon $ dialog.height () sera 0 et le modal ne sera pas complètement centré.

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2,
        bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
}(jQuery));

C'est ce que j'ai fait pour mon application. Si vous jetez un œil aux classes suivantes dans le fichier bootstrap.css .modal-dialog a un remplissage par défaut de 10px et @media screen et (min-width: 768px) .modal-dialog a un remplissage supérieur défini sur 30px. Donc, dans mon fichier css personnalisé, j'ai défini mon remplissage supérieur à 15% pour tous les écrans sans spécifier de largeur d'écran multimédia. J'espère que cela t'aides.

.modal-dialog {
  padding-top: 15%;
}

Meilleur moyen que j'ai trouvé pour tous les navigateurs HTML5:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

// Modes

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}

Le paramètre top est remplacé dans .modal.fade.in pour forcer la valeur définie dans votre déclaration personnalisée, ajoutez le !importantmot - clé après top. Cela oblige le navigateur à utiliser cette valeur et à ignorer toute autre valeur du mot-clé. Cela présente l'inconvénient que vous ne pouvez pas remplacer la valeur ailleurs.

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}

cela fonctionne parfaitement pour moi:

.modal {
text-align: center;
padding: 0!important;
}

.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}

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

URL de démonstration complète : https://codepen.io/dimbslmh/full/mKfCc

Depuis Bootstrap 4, la classe suivante a été ajoutée pour y parvenir sans JavaScript.

modal-dialog-centered

Vous pouvez trouver leur documentation ici .

Merci à vd d'avoir souligné que vous devez ajouter à la fois .modal-dialog-centré à .modal-dialog pour centrer verticalement le modal.

vous pouvez utiliser:

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

pour le centrer à la fois verticalement et horizontalement.

Parce que la plupart des réponses ici n'ont pas fonctionné, ou n'ont fonctionné que partiellement:

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

Vous devez utiliser le sélecteur [style] pour appliquer uniquement le style au modal actuellement actif au lieu de tous les modaux. .inaurait été génial, mais il ne semble être ajouté qu'une fois la transition terminée, ce qui est trop tard et entraîne de très mauvaises transitions. Heureusement, il semble que bootstrap applique toujours un attribut de style sur le modal juste comme il commence à apparaître, donc c'est un peu piraté, mais cela fonctionne.

La :not([style='display: none;'])partie est une solution de contournement pour bootstrap ne supprimant pas correctement l'attribut de style et définissant à la place l'affichage du style sur aucun lorsque vous fermez la boîte de dialogue.

Vous pouvez réaliser un centre d'alignement vertical sur Bootstrap 3 modal comme ça:

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

et ajoutez cette classe css au conteneur "modal-dialog"

<div class="modal-dialog modal-vertical-centered">
...

Exemple de travail jsFiddle: http://jsfiddle.net/U4NRx/

Le moyen le plus propre et le plus simple de le faire est d'utiliser Flexbox! Ce qui suit alignera verticalement un modal Bootstrap 3 au centre de l'écran et est tellement plus propre et plus simple que toutes les autres solutions publiées ici:

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

REMARQUE: Bien qu'il s'agisse de la solution la plus simple, elle peut ne pas fonctionner pour tout le monde en raison de la prise en charge du navigateur: http://caniuse.com/#feat=flexbox

Il semble que (comme d'habitude) IE est à la traîne. Dans mon cas, tous les produits que je développe pour moi-même ou pour des clients sont IE10 +. (cela n'a pas de sens pour les entreprises d'investir du temps de développement pour soutenir les anciennes versions d'IE alors qu'il pourrait être utilisé pour développer le produit et faire sortir le MVP plus rapidement). Ce n'est certainement pas un luxe que tout le monde a.

J'ai vu des sites plus importants détecter si flexbox est pris en charge ou non et appliquer une classe au corps de la page - mais ce niveau d'ingénierie frontale est assez robuste et vous auriez toujours besoin d'une solution de secours.

J'encourage les gens à embrasser l'avenir du Web. Flexbox est génial et vous devriez commencer à l'utiliser si vous le pouvez.

PS - Ce site m'a vraiment aidé à appréhender flexbox dans son ensemble et à l'appliquer à n'importe quel cas d'utilisation: http://flexboxfroggy.com/

EDIT: dans le cas de deux modaux sur une page, cela devrait s'appliquer à .modal.in

Avantages:

• contenu modal accessible même lorsqu'il est plus grand que l'appareil
• n'utilise pas display:table-cell(ce n'est pas destiné aux mises en page)
• ne nécessite aucune modification du modal Bootstrap 3 par défaut markup
• le positionnement est pur CSS. Le JS est ajouté pour fermer le modal en cliquant / appuyez en dessous et au-dessus
• J'ai inclus le sans préfixe SCSSpour ceux qui utilisent gulpougrunt

// closes the modal on click/tap below/above the modal

$('.modal-dialog').on('click tap', function(e){
    if (e.target.classList.contains('modal-dialog')) {
    $('.modal').modal('hide');
  }
})

.modal-dialog {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto;
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Remarque : j'ai l'intention de garder cette réponse à jour avec les dernières spécifications de Bootstrap 3. Pour une solution Bootstrap 4, voyez cette réponse (pour l'instant, elles sont plus ou moins les mêmes, mais avec le temps elles pourraient diverger). Si vous trouvez un bug ou un problème avec celui-ci, faites-le moi savoir et je mettrai à jour. Merci.

Propre, sans préfixe SCSS(à utiliser avec gulp/ grunt):

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  @media (max-width: 767px) {
    min-height: calc(100vh - 20px);
  }
}

Encore une autre solution CSS. Ne fonctionne pas pour les fenêtres contextuelles plus grandes que le port d'affichage.

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

En .modal-dialogclasse, remplacer la position en absolu (par rapport à relatif) et centrer le contenuright:0, left: 0

En .modal.fade .modal-dialog , .modal.in .modal-dialogdéfinissant l'animation de transition sur topplutôt que sur traduction.

margin-topdéplace la fenêtre contextuelle légèrement en dessous du centre en cas de petite fenêtre contextuelle et en cas de fenêtre contextuelle longue, le modal est bloqué avec l'en-tête. Par conséquentmargin-top:0, margin-bottom:0

Besoin de l'affiner davantage.

Pour ceux qui utilisent le bootstrap angular-ui, vous pouvez ajouter les classes ci-dessous en fonction des informations ci-dessus:

Remarque: aucun autre changement n'est nécessaire et il résoudra tous les modaux.

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Pas besoin de nous javascript. Boostrap modal ajoute .in class lorsqu'il apparaît. Modifiez simplement cette combinaison de classes avec modalclassName.fade.in avec flex css et vous avez terminé.

ajoutez ce css pour centrer votre modal verticalement et horizontalement.

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}

Mon choix, juste un peu de CSS: (ne fonctionne pas dans IE8)

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

Vous pouvez jouer avec la première règle pour changer l'apparence du modal.

Utilisation: Bootstrap 3.3.4

Ajoutez simplement le CSS suivant à celui existant, cela fonctionne très bien pour moi

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

Basé sur la réponse d'Arany , mais aussi en tenant compte du défilement des pages.

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));

Je pense que c'est une solution CSS pure un peu plus propre que la solution de Rens de Nobel. Cela n'empêche pas non plus de fermer la boîte de dialogue en cliquant en dehors de celle-ci.

http://plnkr.co/edit/JCGVZQ?p=preview

Ajoutez simplement une classe CSS au conteneur DIV avec la classe .modal-dialog pour obtenir une plus grande spécificité que le CSS bootstraps, par exemple .centered.

HTML

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Et rendez ce conteneur .modal-dialog.centered fixe et correctement positionné.

CSS

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

Ou encore plus simple avec flexbox.

CSS

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

Cela fonctionne en BS3, non testé en v2. Il centre le modal verticalement. Notez qu'il y fera la transition - si vous voulez qu'il apparaisse simplement en position, modifiez la transitionpropriété CSS pour.modal-dialog

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});

e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });

Cela prend la réponse d'Arany et le fait fonctionner si le modal est plus grand que la hauteur de l'écran:

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});

Pour ajouter un centrage modal vertical à bootstrap modal.js, j'ai ajouté ceci à la fin de la Modal.prototype.showfonction:

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});

Pour rendre modal la boîte de dialogue Aligner au milieu de manière véridique.

/* Remarque:

1. même vous n'avez pas besoin d'attribuer un sélecteur, il trouvera tout le modal du document et le placera verticalement au milieu

2.Pour éviter de placer un modal spécifique au centre, vous pouvez utiliser: pas de sélecteur dans l'événement de clic

* /

 $( "[data-toggle='modal']" ).click(function(){
     var d_tar = $(this).attr('data-target'); 
     $(d_tar).show();   
     var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
     var win_height = $(window).height();
     var marr = win_height - modal_he;
     $('.modal-dialog').css('margin-top',marr/2);
  });

Depuis Milan Pandya

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.

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
      $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

Ajoutez également ce correctif CSS pour l'espacement horizontal du modal; on montre le scroll sur les modals, le body scrolls est masqué automatiquement par Bootstrap:

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;
}

Une autre réponse CSS à cette question ...
Cette solution utilise le CSS uniquement pour obtenir l'effet souhaité tout en conservant la possibilité de fermer le modal en cliquant en dehors de celui-ci. Il vous permet également de définir des .modal-contentmaximums de hauteur et de largeur afin que votre fenêtre contextuelle ne dépasse pas la fenêtre. Un défilement apparaîtra automatiquement lorsque le contenu dépasse la taille modale.

Remarque:
le Bootstrap recommandé .modal-dialog divdoit être omis pour que cela fonctionne correctement (ne semble rien casser). Testé dans Chrome 51 et IE 11.

Code CSS:

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

EDIT: La .modal-dialogclasse vous permet de choisir si un utilisateur peut ou non fermer le modal en cliquant en dehors du modal lui-même. La plupart des modaux ont un bouton explicite «fermer» ou «annuler». Gardez cela à l'esprit lorsque vous utilisez cette solution de contournement.

La meilleure solution pour centraliser votre modal avec la largeur et la hauteur est, en css add et en modal d'ajouter ce 'centralize' comme classe.

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }

Centré verticalement Ajoutez .modal-dialog-centré à .modal-dialog pour centrer verticalement le modal

Lancer la démo modale

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>