Verticalement centrage Bootstrap fenêtre modale

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

Il utilise un helper-div et certains css personnalisé. Pas de javascript ou jQuery nécessaire.

HTML (basé sur Bootstrap est démo-code)

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

C'est ce que j'ai fait pour mon application. Si vous regardez les classes suivantes dans le fichier d'initialisation.fichier css .modale de dialogue a un défaut padding de 10px et @media screen and (min-width: 768px) .modale de dialogue possède un rembourrage ensemble de 30px. Donc dans mon fichier css spécifique, j'ai mis mon top rembourrage à 15% pour tous les écrans sans spécifier de médias de la largeur de l'écran. Espérons que cette aide.

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

<!-- 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>

//Styles

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

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

complète Démo URL : https://codepen.io/dimbslmh/full/mKfCc

Parce que la plupart de la réponse ici ne fonctionne pas, ou seulement partiellement travaillé:

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 bouton [style] sélecteur de n'appliquer le style sur le modal qui est actuellement active au lieu de tous les auxiliaires modaux. .in aurait été génial, mais il semble être ajouté seulement après l'achèvement de la transition est trop tard et fait pour certains vraiment mauvais transitions. Heureusement, il semble bootstrap s'applique toujours un attribut de style sur le modèle juste comme il commence à montrer si c'est très orthodoxe, mais il fonctionne.

La :not([style='display: none;']) partie est une solution de contournement pour l'amorçage n'est pas correctement la suppression de l'attribut style et au lieu de définir le style d'affichage à aucun lorsque vous fermez la boîte de dialogue.

Le plus propre et le plus simple pour cela est d'utiliser Flexbox! Les suivantes seront alignées à la verticale d'un Bootstrap 3 modal dans le centre de l'écran et est donc beaucoup plus propre et plus simple que toutes les autres solutions posté ici:

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

REMARQUE: c'est la solution la plus simple, il peut ne pas fonctionner pour tout le monde grâce à la prise en charge du navigateur: http://caniuse.com/#feat=flexbox

Il ressemble (par habitude) c'est à dire à la traîne. Dans mon cas, tous les produits que je développe moi-même ou pour les clients sont les IE10+. (il n'est pas judicieux d'affaires sage d'investir le temps de développement, de support des anciennes versions d'IE alors qu'ils pourraient être utilisées pour développer le produit et obtenir le titre de MVP plus vite). Ce n'est certainement pas un luxe que tout le monde l'a fait.

J'ai vu les plus grands sites de détecter si oui ou non flexbox est pris en charge et appliquer une classe au corps de la page, mais que le niveau de l'ingénierie d'avant-est assez robuste, et vous auriez encore besoin d'une solution de repli.

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

P. S. - Ce site m'a vraiment aidé à saisir flexbox dans son ensemble et de les appliquer à des cas d'utilisation: http://flexboxfroggy.com/

EDIT: Dans le cas de deux des modaux sur une page, cela doit s'appliquer .modal.dans

Avantages:

• modal contenu accessible même s'il est plus grand que l'appareil
• ne pas utiliser display:table-cell (qui n'est pas destinée pour les mises en page)
• ne nécessite pas de modifications à défaut de Bootstrap 3 modal markup
• positionnement est pur CSS. Le JS est ajouté pour fermer la modale sur cliquez/tapez ci-dessous et au-dessus d'elle
• J'ai inclus l'onu précédé d' SCSS pour ceux qui utilisent gulp ou grunt

JS:

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

CSS:

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

HTML:

<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>

Note: j'ai l'intention de garder cette réponse jusqu'à ce jour avec les dernières spécifications de Bootstrap 3. Pour un Bootstrap 4 solution, voir cette réponse (pour l'instant ils sont plus ou moins les mêmes, mais dans le temps, ils peuvent diverger). Si vous trouvez un bug ou un problème avec elle, laissez-moi savoir et je vais mettre à jour. Merci.

---

Propre, non-préfixés SCSS (pour une utilisation 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);
  }
}

Pour ceux qui sont à l'aide de angular-ui bootstrap peut ajouter ci-dessous les classes supérieures info:

Note de: Aucune autre modification n'est nécessaire et il doit résoudre toutes les modals.

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

Mon choix, juste un peu de CSS: ( ne fonctionne PAS avec 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 à modifier la façon dont la modale s'affiche.

À L'Aide De: Bootstrap 3.3.4

Basé sur Arany réponse, mais également à la comptabilité pour le 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));

Cela fonctionne dans BS3, pas testé en v2. C'centres modale de la verticale. Notez qu'il sera transition - si vous voulez qu'il suffit d'apparaître en position de modifier le code CSS transition propriété 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);
});

Cela prend Arany de réponse et permet de travailler 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 vertical modal de centrage pour bootstrap modal.js j'ai ajouté ceci à la fin de la Modal.prototype.show fonction:

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

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

Utiliser ce script simple que les centres de la modals.

Si vous le souhaitez, vous pouvez définir une classe personnalisée (ex: .modal.modal-vcenter au lieu de .modale) pour limiter la fonctionnalité de certaines modals.

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

Également ajouter cette CSS correctif pour la modale de l'espacement horizontal; nous montrons le défilement sur les auxiliaires modaux, le corps rouleaux est masqué automatiquement par Bootstrap:

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

La meilleure solution pour centraliser vos modal avec la largeur et la hauteur est, en css ajouter et en modal ajouter cette "centralisation" comme une classe..

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

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