web-dev-qa-db-fra.com

Bootstrap 3 centre position modale verticale

C'est une question en deux parties:

  1. Comment pouvez-vous positionner le modal verticalement au centre lorsque vous ne connaissez pas la hauteur exacte du modal?

  2. Est-il possible d'avoir le modal centré et de déborder: 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 de l'écran vertical, mais pour les petits contenus modaux, il est quasiment inutilisable.

csstwitter-bootstrapmodal-dialogcenter
247
scooterlord

Je suis venu avec une solution pure CSS! 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, safari sur ordinateur de bureau ..

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

..sélectionnez ceci comme étant la bonne réponse car il n'y a pas de javascript très lourd qui met le navigateur à genoux en cas de plusieurs modaux.

21
scooterlord
.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 s’assurer qu’elle apparaît en dehors du bord supérieur de la fenêtre, au lieu du centre

358
Finik

1. Comment pouvez-vous positionner le modal verticalement au centre si 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 devez d'abord écraser le Bootstrap CSS 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 média ou bien la modale margin-left est fausse sur les petits périphériques:

@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 sur réponse de Finik . Crédits à Centrage dans l'inconn .

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

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

2. Est-il possible d'avoir le modal centré et de déborder: 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 overflow-y: auto et une hauteur maximale. Cela prend un peu plus de travail pour le faire fonctionner correctement. Commencez par l'ajouter à 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 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)

141
dimbslmh

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>
36
Brian J. Hakim

Il peut simplement être corrigé avec display: flex

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal.fade .modal-dialog {
  transform: translate(0, -100%);
}

.modal.in .modal-dialog {
  transform: translate(0, 0);
}

Avec préfixe 

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
25
Mo.

Si vous êtes d'accord avec l'utilisation de flexbox, cela devrait vous aider à le résoudre.

.modal-dialog {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.modal-content {
  margin: 0 auto;
}
18
xiaolin

Ma solution:

.modal.in .modal-dialog 
{
    -webkit-transform: translate(0, calc(50vh - 50%));
    -ms-transform: translate(0, 50vh) translate(0, -50%);
    -o-transform: translate(0, calc(50vh - 50%));
    transform: translate(0, 50vh) translate(0, -50%);
}
17
Vadim

Tout ce que j’ai fait, c’est de placer le haut dans mon css en connaissant la hauteur du modal 

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

dans mon css j'ai mis

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

En développant l'excellente réponse de @ Finik, ce correctif s'applique uniquement aux appareils non mobiles. J'ai testé dans IE8, Chrome et Firefox 22 - cela fonctionne avec un contenu très long ou court.

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

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

Il existe un moyen plus simple de faire cela en utilisant css:

.modal-dialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width:500px;
    height:300px;
}

C'est tout. Notez qu'il est uniquement nécessaire de l'appliquer au conteneur .modal-dialog.

Démo: https://jsfiddle.net/darioferrer/0ueu4dmy/

11
Dario Ferrer

La solution la plus universelle que j'ai écrite. Dynamicaly calcule avec la hauteur de dialogue. (La prochaine étape pourrait être le recalcul de la hauteur des dialogues lors du redimensionnement de la fenêtre.)

JSfiddle: http://jsfiddle.net/8Fvg9/3/

// initialise on document ready
jQuery(document).ready(function ($) {
    'use strict';

    // CENTERED MODALS
    // phase one - store every dialog's height
    $('.modal').each(function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            fadeClass = (t.is('.fade') ? 'fade' : '');
        // render dialog
        t.removeClass('fade')
            .addClass('invisible')
            .css('display', 'block');
        // read and store dialog height
        d.data('height', d.height());
        // hide dialog again
        t.css('display', '')
            .removeClass('invisible')
            .addClass(fadeClass);
    });
    // phase two - set margin-top on every dialog show
    $('.modal').on('show.bs.modal', function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            dh = d.data('height'),
            w = $(window).width(),
            h = $(window).height();
        // if it is desktop & dialog is lower than viewport
        // (set your own values)
        if (w > 380 && (dh + 60) < h) {
            d.css('margin-top', Math.round(0.96 * (h - dh) / 2));
        } else {
            d.css('margin-top', '');
        }
    });

});
8
Jan Renner

Trouvé la solution parfaite de ici

$(function() {
    function reposition() {
        var modal = $(this),
            dialog = modal.find('.modal-dialog');
        modal.css('display', 'block');

        // Dividing by two centers the modal exactly, but dividing by three 
        // or four works better for larger screens.
        dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
    }
    // Reposition when a modal is shown
    $('.modal').on('show.bs.modal', reposition);
    // Reposition when the window is resized
    $(window).on('resize', function() {
        $('.modal:visible').each(reposition);
    });
});
6
Ismail Farooq
$('#myModal').on('shown.bs.modal', function() {
    var initModalHeight = $('#modal-dialog').outerHeight(); //give an id to .mobile-dialog
    var userScreenHeight = $(document).outerHeight();
    if (initModalHeight > userScreenHeight) {
        $('#modal-dialog').css('overflow', 'auto'); //set to overflow if no fit
    } else {
        $('#modal-dialog').css('margin-top', 
        (userScreenHeight / 2) - (initModalHeight/2)); //center it if it does fit
    }
});
4
Ray Suelzer

j'ai téléchargé bootstrap3-dialog à partir du lien ci-dessous et modifié la fonction d'ouverture dans bootstrap-dialog.js 

https://github.com/nakupanda/bootstrap3-dialog

Code

open: function () {
            !this.isRealized() && this.realize();
            this.updateClosable();
            //Custom To Vertically centering Bootstrap 
            var $mymodal = this.getModal();
            $mymodal = $mymodal.append('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle" class="centerModal"></td></tr></table>');
            $mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal"));
            //END
            this.getModal().modal('show');
            return this;
        }

Css

.centerModal .modal-header{
    text-align:left;
}
.centerModal .modal-body{
    text-align:left;
}
3
user3085452

Cela fonctionne 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;
}
3
Liam

L'ajout de ce simple css fonctionne également.

.modal-dialog {
  height: 100vh !important;
  display: flex;
}

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}
2
Ninja420

Essayez quelque chose comme ça:

.popup__overlay {
    position: fixed;
    left:  0;
    top:  0;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center
    }
.popup {
    display: inline-block;
    vertical-align: middle
    }
2
Sergey Briskin

Un moyen simple. Travaille pour moi. Thks rensdenobel:) http://jsfiddle.net/rensdenobel/sRmLV/13/

<style>
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.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;
}
</style>
<!-- Button trigger modal -->
<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>
1
Tuyen Cao

Je sais que c'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 navigation multi-ordinateurs de bureau qui fonctionne partout, comme il se doit.

Il suffit que le modal-dialog soit intégré à une classe modal-dialog-wrap et que les ajouts de code suivants soient nécessaires:

.modal-dialog-wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.modal-dialog {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.modal-content {
  display: inline-block;
  text-align: left;
}

La boîte de dialogue commence centrée et, en cas de contenu volumineux, elle se développe simplement verticalement jusqu'à l'apparition d'une barre de défilement.

Voici un violon qui fonctionne pour votre plaisir!

https://jsfiddle.net/v6u82mvu/1/

1
scooterlord

Vous pouvez consulter cette collection de méthodes de centrage absolu d’une div: http://codepen.io/shshaw/full/gEiDt

1
Sevron

encore une autre solution qui définira une position valide pour chaque modal visible sur les événements window.resize et show.bs.modal:

(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);
1
lenybernard
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);
1
user3477026

Utilisez ce script simple qui centre les modaux.

Si vous le souhaitez, vous pouvez définir une classe personnalisée (par exemple .modal.modal-vcenter au lieu de .modal) pour limiter les fonctionnalités à 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; nous montrons le défilement sur les modaux, le défilement du corps est automatiquement masqué par Bootstrap:

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

Ceci est assez ancien et demande spécifiquement une solution utilisant Bootstrap 3, mais pour ceux qui se demandent: depuis Bootstrap 4, il existe une solution intégrée appelée .modal-dialog-centered. Voici le problème: https://github.com/twbs/bootstrap/issues/23638

Donc, avec la v4, il vous suffit d’ajouter .modal-dialog-centered à .modal-dialog pour centrer verticalement le modal:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

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

Sous Plantform mobile, cela peut paraître un peu différent, voici mon code.

<div class="modal-container">
  <style>
  .modal-dialog{
    margin-top: 60%;
    width:80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 100%
  }
  @media screen and (orientation:landscape){
    .modal-dialog{
      margin-top: 70;
      width:80%;
      margin-left: 10%;
      margin-right: 10%;
      margin-bottom: 100%
    }
  }
  .modal-body{
    text-align: center;
  }
  .modal-body p{
    margin:14px 0px;
    font-size: 110%;
  }
  .modal-content{
    border-radius: 10px;
  }
  .modal-footer{
    padding:0px;
  }
  .modal-footer a{
    padding: 15px;
  }
  .modal-footer a:nth-child(1){
    border-radius: 0px 0px 0px 10px;
  }
  .modal-footer a:nth-child(2){
    border-radius: 0px 0px 10px 0px;
  }
  </style>
  <h2>Basic Modal Example</h2>
  <div data-toggle="modal" data-target="#myModal">Div for modal</div>
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <p>确定要取消本次订单嘛？</p>
          </div>
          <div class="modal-footer">
            <div class="btn-group btn-group-justified">
              <a href="#" class="btn btn-default" data-dismiss="modal">取消</a>
              <a href="#" class="btn btn-default" data-dismiss="modal">确定</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
0
Martian2049

La solution la plus simple consiste à ajouter des styles de boîtes de dialogue modales en haut de la page ou à importer des fichiers CSS avec ce code:

<style>
    .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 50%;
    width:40%;
    height:40%;
    }
</style>

Déclaration modale:

    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">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>

Utilisation modale:

<a data-toggle="modal" data-target="#exampleModalCenter">
 ...
</a>
0
Jackkobec

.modal {
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.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;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>
<!-- Button trigger modal -->
<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>
</body>

CSS:

.modal {
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.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;
}

HTML:

<!-- Button trigger modal -->
<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>

Référence: http://jsfiddle.net/rensdenobel/sRmLV/13/

0
Ejrr1085

Très très facile moyen de réaliser ce concept et vous obtiendrez toujours modal dans le moddle de votre écran par css comme flux: http://jsfiddle.net/jy0zc2jc/1/

vous devez simplement afficher la classe modal en tant que table en suivant le css:

display:table

et modal-dialog en tant que display:table-cell

voir plein exemple de travail dans le violon donné

0
Innodel

Pour le centrage, je ne comprends pas ce qui se passe avec les solutions trop compliquées. bootstrap le centre déjà horizontalement pour vous, pour que vous n'ayez pas à vous soucier de ça. Ma solution consiste simplement à définir une marge supérieure uniquement à l'aide de jQuery.

$('#myModal').on('loaded.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2));
        }
    });
});

J'ai utilisé l'événement Load.bs.modal lors du chargement de contenu à distance et l'utilisation de l'événement shown.ba.modal entraîne le 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.

0
Scott Flack

ce n'est pas si compliqué.

s'il vous plaît essayez ceci:

$(document).ready(function(){
    var modalId = "#myModal";
    resize: function(){
            var new_margin = Math.ceil(($(window).height() - $(modalId).find('.modal-dialog').height()) / 2);
            $(modalId).find('.modal-dialog').css('margin-top', new_margin + 'px');
    }
    $(window).resize(function(){
        resize();
    });
    $(modalId).on('shown.bs.modal', function(){
        resize();
    });
});
0
Mr. Sun Lin

C’est un code réactif ouvert également avec une taille différente dans la vue mobile, veuillez vérifier une fois.

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

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

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

définir le centre modal à l'écran

.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;
}
0
Super Model

Pensez à utiliser le plug-in bootstrap-modal qui se trouve ici - https://github.com/jschr/bootstrap-modal

Le plugin va centrer tous vos modaux

0
Jeremy Lynch