Centrage vertical de la fenêtre modale Bootstrap

181

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);
        }
    })
user2613813
la source
Essayez de remplacer .modal.fade.inégalement
haim770
Essayez avec ceci: github.com/jschr/bootstrap-modal
John Magnolia
3
Essayez ce zerosixthree.se/ ... J'utilise: .modal.fade.in {top: 50%; transformer: translateY (-50%); }
jowan sebastian
Ajout de la solution flexbox ( translateY(-50%)celle qui rend le haut du modal inaccessible lorsque le contenu modal est plus grand que la hauteur de l'appareil).
tao
À partir de bootstrap 4, centré sur le dialogue modal, il a été ajouté que ce n'est plus nécessaire. Veuillez lire cette réponse ci-dessous.
jcaruso

Réponses:

258

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;
}
RNobel
la source
Avec cette solution, à cause de la hauteur: 100%; et largeur: 100%; vous ne pouvez pas fermer les modaux en cliquant sur hors des modaux. Pouvez-vous penser à une solution pour ce @Rens de Nobel?
pcatre
1
Ok, cette solution semble fonctionner très bien (sauf qu'elle m'empêche de fermer les modaux en cliquant dessus). Mais d'une manière ou d'une autre, certains de mes tests e2e avec le rapporteur échouent (et je ne trouve pas la raison pour laquelle, je n'ai pas l'impression que ce soit un bogue à ce sujet). Quoi qu'il en soit, je reviens à la réponse javascript pour ne pas perdre plus de temps là-dessus. Mais comme je l'ai dit, cela semble fonctionner correctement, il suffit d'avertir les gens qui font des tests e2e avec un rapporteur de faire attention.
pcatre
3
@pcatre, merci pour le tuyau! J'ai mis à jour le code avec un correctif pour cela. Définition des événements de pointeur: aucun; sur les classes d'alignement fait l'affaire. Testé dans IE11, les derniers Chrome et Firefox et iOS Safari.
RNobel
4
Je ne sais pas si cela a été mis à jour depuis les commentaires des utilisateurs disant que cela ne fonctionne pas, en cliquant sur des éléments modaux internes, mais cela fonctionne à 100% pour moi à partir de maintenant, en utilisant l'exemple du violon ci-dessus. Merci beaucoup pour votre aide et tous les commentaires ci-dessus.
Michael G
2
À partir de bootstrap 4, centré sur le dialogue modal, il a été ajouté que ce n'est plus nécessaire. Veuillez lire cette réponse ci-dessous.
jcaruso
94

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));
Arany
la source
6
Celui-ci est parfait! Juste au lieu de $ (document) .height () son correct d'utiliser $ (window) .height () à la ligne 4. De plus, je changerais la dernière ligne en: $('.modal:visible').each(centerModal);
Denis Chmel
Cela fonctionne parfaitement pour moi, merci. lorsque nous utilisons ce code, nous devons également définir le remplissage en haut et en bas du dialogue modal à 0px, pour un centrage parfait.
mina morsali
Cela se rompt si le modal est plus haut que la hauteur de la fenêtre. J'ai donc ajouté la ligne suivante juste avant de définir la marge en haut de la boîte de dialogue: if(offset < 0) offset = 0; Je colle tout le bloc dans un cas de réponse qui n'est pas clair!
jetlej
J'ai ajouté quelques modifications supplémentaires pour garder la marge supérieure égale à la marge inférieure du modal, dans la réponse ci
jetlej
Parfait, il manquait $ (this) .css ('display', 'block'); tout le temps et
j'ai
81

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%;
}
user1279047
la source
6
cela ne fonctionne que pour les petites boîtes alret, et ne fonctionne pas pour les grandes boîtes
mina morsali
Vous pouvez simplement postuler aux petits modaux:.modal-dialog.modal-sm { padding-top:15%; }
Dunc
61

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;
}
taha shahid
la source
2
J'ai aimé cette solution, très propre. Je ne sais pas trop pour les versions de bureau ou les anciennes versions de Safari, mais cela semble aller bien sur iOS 8.
Nicolas Galler
1
Oui, je suis d'accord avec @NicolasGaller. Cela fonctionne bien pour moi aussi. J'ai testé dans Chrome et Firefox. Ça marche bien.
Manjunath Reddy
2
Il s'agit d'une excellente amélioration progressive uniquement. Aucun js requis et tout navigateur qui ne prend pas en charge flexbox obtiendra le placement modal d'amorçage par défaut.
Craig Harshbarger
Fermer, mais il est impossible de fermer les modaux lorsqu'il y en a plus d'un sur la page. Voir ma réponse ci-dessous pour corriger.
Robert McKee
1
Mise à jour: Ajout align-items: center;de body.modal-open .modalsemble fonctionner.
bernie
20
<!-- 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;
}
user3389
la source
3
Telle est la réponse universelle. Je ne sais pas pourquoi personne n'a voté pour cela.
Csaba Toth
3
J'ai parcouru au moins 4 entrées SO chacune avec une douzaine de propositions. BTW, à l'ère du HTML5, cela devrait au moins être intégré à certains frameworks. Au lieu de jongler.
Csaba Toth
1
A noter également: si vous dites largeur: 100% pour le style de tableau, vous obtiendrez un centrage horizontal (au cas où le modal ne serait pas masqué par débordement).
Csaba Toth
1
Meilleure réponse de loin. Cela crée une barre de défilement mais vous pouvez la désactiver en créant .modal-open .modal {overflow-y: hidden; }
Christophe
14

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%;
}
Alexander Varwijk
la source
Cela m'empêche de fermer le modal en cliquant sur l'arrière-plan du modal.
Scott Simpson
13

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

AmirHossein Manian
la source
13

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.

jcaruso
la source
1
C'est la meilleure réponse pour bootstrap 4.
broc.seib
en ajoutant à la fois le dialogue modal et centré sur le dialogue modal a un meilleur résultat
vd
1
@vd qui est compris étant donné la documentation dit "Ajouter .modal-dialog-centré à .modal-dialog pour centrer verticalement le modal." Je mettrai à jour ma réponse pour refléter cela également pour ceux qui ne l'ont pas compris.
jcaruso
11

vous pouvez utiliser:

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

pour le centrer à la fois verticalement et horizontalement.

Aryeh Armon
la source
2
C'est le vrai "comment centrer quelque chose" avec CSS sans utiliser Flex. Le fait que le contexte soit Bootstrap ou modal ne devrait pas être pertinent. Toutes les autres réponses sont trop exagérées.
ESR
1
Avec cette méthode, si le modal est plus grand que la hauteur de l'écran de l'appareil, le haut du modal devient inaccessible.
tao
11

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.

Robert McKee
la source
Super merci. C'est en fait la seule chose qui a fonctionné en 2016.
AlexioVay
4 ans se sont écoulés. Toujours utile. Merci mon pote!
Hassan Nomani le
8

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/

EGurelli
la source
Comment centrer exactement le dialogue verticalement?
gkalpak
Fonctionne très bien dans la plupart des endroits, mais ne fonctionne pas dans les applications html5 encapsulées inférieures à Android 4.4.
Josh
3
Mon modal était en bas de la page avec ceci
Dorian
1
OUAIP! J'utilise: .modal.fade.in {top: 50%; transformer: translateY (-50%); }
jowan sebastian
Modifiez simplement 50% à 15% et la boîte de dialogue sera au centre de la fenêtre. .modal-vertical-centré {transform: translate (0, 15%)! important; -ms-transform: translate (0, 15%)! important; / * IE 9 / -webkit-transform: translate (0, 15%)! Important; / Safari et Chrome * /}
Haimei
8

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

Greg Blass
la source
Cela fonctionne autrement bien, mais l'animation de clôture n'a pas l'air bien.
user2061057
Devrait être capable de réaliser une animation avec des transitions CSS3?
Greg Blass
7

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

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);
  }
}
tao
la source
2
Meilleure solution IMO.
Radmation le
3

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.

Pravin
la source
3

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;
}
Pan Jyotirmoy
la source
3

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%;
}
Personne
la source
2

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

John Bernardsson
la source
2

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;
}
Shankar Prakash G
la source
2

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));
Mathieu
la source
2

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;
}
Vit Koumar
la source
Cette version flexbox ne fonctionne pas comme prévu. Testé sur le dernier Chrome (52.0.x), le dialogue .modal est correctement centré mais son interaction de contenu semble figée sur l'ancien endroit (bizarrement). Cependant, vous pouvez essayer d'utiliser cette technique directement sur .modal-dialog (pas sur .modal), et avec d'autres propriétés, cela semble fonctionner. =)
giovannipds
2

.modal.in .modal-dialog {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Michael Oxborrow
la source
1

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);
});
gpcola
la source
1
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)
    });
Tomtom
la source
Pourriez-vous préciser quelle est la fonction «e» dans votre réponse?
Michael Butler
1

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);
});
jetlej
la source
Hey @jetlej, pourquoi ne modifiez-vous pas simplement la réponse d'Arany pour l'inclure? Vous résolvez un gros bug sur son code.
pcatre
@pcatre - Je ne savais pas que je pouvais soumettre des modifications! Merci d'avoir souligné cela
jetlej
1

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});
Andersra
la source
Ne fonctionnera pas bien si la boîte de dialogue change de hauteur une fois affichée, en raison du redimensionnement de la page ou de son expansion / réduction.
Dirbaio
0

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

user3690101
la source
0

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;
}
Rakesh Vadnal
la source
0

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.

dsanchez
la source
0

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%;
   }
yogesh mhetre
la source
0

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>
Tayyab Roy
la source