web-dev-qa-db-fra.com

Centrer verticalement la fenêtre modale Bootstrap

Je voudrais centrer mon modal sur la fenêtre d'affichage (au centre), j'ai essayé d'ajouter des 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);
        }
    })
javascripttwitter-bootstrapbootstrap-modal
177
user2613813

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

Il utilise un helper-div et quelques CSS personnalisés. 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;
}
247
RNobel

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. De plus, j'utilise l'événement "show" au lieu de "shown" car après cela, il m'a donné un très mauvais saut de positionnement (visible lorsque vous avez bootstrap animations). Assurez-vous de régler l'affichage sur "bloquer" avant de positionner, 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));
93
Arany

C'est ce que j'ai fait pour mon application. Si vous examinez les classes suivantes dans le fichier bootstrap.css, le remplissage par défaut de 10mx et de l'écran @media et .modal-dialog est défini sur (min-width: 768px). Donc, dans mon fichier CSS personnalisé, je règle mon remplissage supérieur à 15% pour tous les écrans sans spécifier de largeur d'écran. J'espère que cela t'aides.

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

Le 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;
}
59
taha shahid
<!-- 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;
}
18
user3389

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

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

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

complete Demo URL: https://codepen.io/dimbslmh/full/mKfCc

12
AmirHossein Manian

vous pouvez utiliser:

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

pour le centrer à la fois verticalement et horizontalement.

10
Aryeh Armon

Parce que la plupart des réponses ne fonctionnent pas ou ne fonctionnent 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 sur le modal actuellement actif au lieu de tous les modaux. .in aurait été formidable, mais il semble ne l'avoir été ajoutée qu'après la transition, ce qui est trop tard et engendre de très mauvaises transitions. Heureusement, il semble que bootstrap applique toujours un attribut de style sur le modal juste au moment où il commence à s'afficher, ce qui est un peu hacky, mais cela fonctionne.

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

9
Robert McKee

À partir de Bootstrap 4, la classe suivante a été ajoutée pour vous permettre de le faire sans JavaScript.

modal-dialog-centered

Vous pouvez trouver leur documentation ici .

8
jcaruso

Vous pouvez obtenir un centre d'alignement vertical sur Bootstrap 3 modal comme celui-ci:

.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 ajouter cette classe css au conteneur "modal-dialog"

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

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

8
EGurelli

Pour ce faire, le moyen le plus simple et le plus simple consiste à utiliser Flexbox! Les éléments suivants alignent verticalement un Bootstrap 3 modal au centre de l'écran et sont beaucoup plus propres et simples 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 risque de 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 soit à la traîne. Dans mon cas, tous les produits que je développe pour moi ou pour les clients sont IE10 +. (Cela n’a aucun sens d’affaires d’investir du temps de développement dans les anciennes versions de IE, car il pourrait être utilisé pour développer réellement le produit et obtenir 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 et appliquer une classe au corps de la page - mais ce niveau d'ingénierie frontale est assez robuste et vous avez 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.

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

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

8
Greg Blass

Avantages:

  • contenu modal accessible même lorsqu'il est plus grand que l'appareil
  • n'utilise pas display:table-cell (ce n'est pas fait pour les layouts)
  • ne nécessite aucune modification de la valeur par défaut Bootstrap 3 modal markup
  • le positionnement est pur CSS. Le JS est ajouté pour fermer le modal en cliquant/tapotant en dessous et au dessus
  • J'ai inclus le SCSS sans préfixe pour ceux qui utilisent gulp ou grunt
// 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 un Bootstrap _ 4 solution, voir cette réponse (pour l’instant, elles sont plus ou moins identiques, mais avec le temps, elles pourraient diverger). Si vous trouvez un bogue ou un problème avec cela, 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);
  }
}
6
Andrei Gheorghiu

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

Remarque: Aucune autre modification n'est nécessaire et cela 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;
}
3
Jyotirmoy Pan

Pas besoin de nous javascript. Le modal Boostrap ajoute la classe .in quand 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%;
}
3
No one

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

Dans .modal-dialog la classe redéfinit la position sur absolue (à partir de la valeur relative) et centre le contenu right:0, left: 0

Dans .modal.fade .modal-dialog , .modal.in .modal-dialog, réglez l'animation de transition sur top plutôt que sur la traduction.

margin-top déplace le popup légèrement en dessous du centre en cas de petite popup et en cas de longue, le modal est bloqué avec l'en-tête. D'où margin-top:0, margin-bottom:0

Besoin de l'affiner davantage.

3
pravin

Ajoutez simplement le code CSS suivant à votre fichier 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;
}
2
Shankar Prakash G

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 spécificité supérieure à celle du code d'amorçage CSS, 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 assurez-vous que ce conteneur .modal-dialog.centered est bien 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;
}
2
Vit Koumar

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.

Utiliser: Bootstrap 3.3.4

2
John Bernardsson

Basé sur réponse d'Arany , mais tenant également compte du défilement de page.

(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));
2
mathieu

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

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

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

Cela fonctionne dans BS3, pas testé dans la v2. Il centre le modal verticalement. Notez que la transition s’effectuera là-bas - si vous voulez qu’elle apparaisse simplement dans la position, éditez la propriété CSS transition 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);
});
1
gpcola

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);
});
1
jetlej

Pour que Modal vérifie veritablement la boîte de dialogue Aligner tout le milieu.

/* Remarque:

1. Même si vous n'avez pas besoin d'affecter de sélecteur, il trouvera tous les modaux du document et les placera verticalement au milieu

2.Pour éviter au milieu un modal spécifique d'être ce centre, vous pouvez utiliser: pas de sélecteur dans l'événement click

* /

 $( "[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);
  });

De Milan Pandya

1
user3690101
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)
    });
1
Tomtom
.modal.in .modal-dialog {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
1
Michael Oxborrow

La meilleure solution pour centraliser votre modal avec la largeur et la hauteur est, dans css add et dans modal, d'ajouter ce "centraliser" en tant que classe.

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

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

Une autre réponse CSS à cette question ...
Cette solution utilise CSS uniquement pour obtenir l’effet souhaité tout en conservant la possibilité de fermer le modal en cliquant à l’extérieur. Il vous permet également de définir .modal-content hauteur et largeur maximales afin que votre fenêtre contextuelle ne se développe pas au-delà de la fenêtre d'affichage. Un défilement apparaîtra automatiquement lorsque le contenu dépassera la taille modale.

note:
Le Bootstrap recommandé .modal-dialogdiv devrait ê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 classe .modal-dialog vous permet de choisir si un utilisateur peut ou non fermer le modal en cliquant à l'extérieur de celui-ci. La plupart des modaux ont un bouton explicite "fermer" ou "annuler". Gardez cela à l'esprit lorsque vous utilisez cette solution de contournement.

0
dsanchez

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