Bootstrap 3 centre de position verticale modale

270

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 d'avoir un débordement: 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 d'écran verticale, mais pour les petits contenus modaux, c'est à peu près inutilisable.

scooterlord
la source
1
@Heiken pour une raison quelconque, cela me fait sauter sur l'écran,
j'utilise du

Réponses:

374
.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 vous assurer qu'elle apparaît hors de la bordure supérieure de la fenêtre, au lieu du centre

Finik
la source
J'étais en train de contourner cela par erreur, merci d'avoir souligné que cela fonctionne réellement dans les coulisses.
Dorian
C'est probablement la meilleure façon de centrer verticalement non seulement le modal bootstrap mais tout le reste. css-tricks.com/centering-in-the-unknown
Mark S
4
Je précise que cela ne fonctionne pas très bien sur Mobile. Parce que la définition ": après" a une hauteur de 100% et peut déplacer automatiquement le modal vers le bas de la page. Je viens de résoudre la déclaration de .modal {display: flex! Important;} .modal-dialog {margin: auto}. Les 92,97% des personnes ont déjà pris en charge l'utilisation de cette propriété CSS, mais pour un support général, vous pouvez utiliser JavaScript pour définir les marges.
Walter Chapilliquen - wZVanG
21
Absolument génial, mais je recommanderais de l'utiliser uniquement au-dessus de 768 px et de laisser le paramètre par défaut sur mobile. La position supérieure est la meilleure pour les modaux lorsque la hauteur de l'écran est petite. J'ai également ajusté une animation pour la faire apparaître depuis le centre, voici l'exemple de travail si quelqu'un en a besoin: codepen.io/anon/pen/zGBpNq
bwitkowicz
Cette solution décale la fenêtre modale vers la droite pour 2px, cause: avant l'élément. Mais cela peut être résolu en ajoutant le même code pour: après
Cypher
146

1. Comment pouvez-vous positionner le modal verticalement au centre lorsque 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 devrez d'abord remplacer le CSS Bootstrap 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 multimédia ou bien la marge modale gauche est incorrecte sur les petits appareils:

@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 de la réponse de Finik . Crédits à Centrer dans l'inconnu .

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

Remarquez la marge négative à droite? Cela supprime l'espace ajouté par inline-block. Cet espace fait sauter le modal au bas de la page @ largeur <media 768px.

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

dimbslmh
la source
1
excellente réponse et poste! Cependant, cela peut-il également être animé? Cela fonctionne très bien quand il apparaît, mais qu'en est-il de l'animation? Je suis au travail et je ne peux pas le tester en atmosphère, mais j'ai hâte de voir les résultats
scooterlord
Vous pouvez ajouter une classe de fondu sur le modal. Découvrez ma solution mise à jour sur cdpn.io/mKfCc
dimbslmh
Bien qu'il semble fonctionner très bien sur codepen, je ne peux pas le faire fonctionner sur mon projet. Je suppose que vous avez juste besoin d'ajouter le code et de ne pas remplacer quelque chose de bien?
scooterlord
1
Rebonjour! Remarqué ce qui suit. Lorsque le premier modal s'ouvre, la marge de droite est incorrecte jusqu'à ce que vous redimensionniez une fois. Des ides sur celui-ci?
scooterlord
1
@bernie J'ai fait des captures d' écran sur Browserstack avec une fourchette de mes codepen qui a court ouvert modal sur document.ready: browserstack.com/screenshots/... Browserstack ne supporte pas v9.3.x captures d' écran (encore), mais je pense quelque chose de similaire à ce que vous avez décrit se produit sur iOS 6.0 (voir capture d'écran iPad 3e (6.0) (Portrait)). C'est peut-être un vieux bogue qui est revenu dans la v9.3.2. Si vous le souhaitez, vous pouvez déposer un rapport de bogue sur forums.developer.apple.com/community/safari-and-web/…
dimbslmh
37

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>
Brian J. Hakim
la source
Vous devez utiliser un rembourrage. margin cassera l'action de fermeture lorsque vous cliquez dans la superposition
anvd
2
La marge supérieure réglée à 25% nécessite que le modal soit à 50% haut.
rébellion du
28

Il peut simplement être réparé 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);
}
Mo.
la source
2
Cela empêche le clic sur le fond en raison de la hauteur de 100 Vh. C'est bien pour les paramètres "toile de fond:" statique "".
ianstigator
cette cause s'estompe problème d'animation
Viswanath Lekshmanan
23

Je suis venu avec une pure solution CSS! C'est css3 cependant, ce qui signifie que ie8 ou inférieur n'est pas pris en charge, mais à part cela, il est testé et fonctionne sur ios, android, ie9 +, chrome, firefox, desktop safari ..

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 cela comme la bonne réponse car il n'y a pas de javascript extra lourd qui met le navigateur à genoux en cas de plusieurs modaux.

scooterlord
la source
8
L'intérêt de JavaScript était d'obtenir la hauteur inconnue du modal. Votre solution a une hauteur fixe de 80%, ce qui ne répond pas à votre propre question: "Comment pouvez-vous positionner le modal verticalement au centre lorsque vous ne connaissez pas la hauteur exacte du modal ?"
dimbslmh
... la dimension de la hauteur est définie pour limiter la hauteur modale MAXIMALE par rapport à la hauteur de l'écran. Cependant, le pourcentage de traduction est défini en fonction de la hauteur du CONTENU.
scooterlord
3
Si vous souhaitez obtenir une solution qui ne modifie pas la taille de la boîte modale, essayez également la solution CSS suivante: tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal
klickagent.ch
Très bien aussi. Cependant, il a une approche différente de celle que je décris. Dans votre cas, le modal entier monte et descend, quand dans mon cas un élément survolé est créé. Très bien quand même! Je l'aime!
scooterlord
Cela nécessite de régler la hauteur. Ce qui n'est pas exactement la même que celle demandée par l'utilisateur.
rébellion
21

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

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

.modal-content {
  margin: 0 auto;
}
xiaolin
la source
7
Je découvre que cette réponse fonctionne très bien pour moi. Cependant, si vous souhaitez permettre aux utilisateurs de fermer un modal en cliquant sur sa toile de fond, assurez-vous d'ajouter pointer-events: noneà .modal-dialoget pointer-events: autoà .modal-content. Becausu .modal-dialog {height: 100%}couvre toute la colonne au-dessus et en dessous d'un modal et empêche les utilisateurs de cliquer sur le fond de cette zone.
wuct
combiné avec la suggestion de @ChingTingWu, le plus efficace
strider
Et où est la suggestion @ChingTingWu?
giovannipds
1
ChingTingWu semble avoir changé pour @wuct
xiaolin
1
@giovannipds Oups, j'ai renommé mon nom d'utilisateur, car il est plus court et plus facile à baliser. Désolé pour la confusion :)
wuct
20

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%);
}
Vadim
la source
Cela semble fonctionner parfaitement avec Bootstrap 3. Pourquoi n'est-ce pas la réponse acceptée? C'est beaucoup plus simple (4 directives CSS) que les autres.
danielricecodes
@danielricecodes Je vais prendre une photo et supposer que c'est à cause des problèmes avec les unités de fenêtre. . La réponse proposée par scooterlord proposait une compatibilité même avec IE9 et iOs, ce qui me semble préoccupant. Si vous consultez la page des problèmes de canIuse, vous verrez qu'il y a des problèmes avec iOs et IE10 et les versions antérieures. Non pas que je sois d'accord ou pas que ce soit la bonne réponse. Je souligne simplement pourquoi cela n'a peut -être pas été sélectionné comme réponse.
Malavos
1
Il y a un problème avec cette approche, c'est quand le modal a un contenu défilable (plus de contenu que ne tient dans la fenêtre)
Steven Pribilinskiy
Ce devrait être la réponse acceptée. Jusqu'à présent, c'est la seule solution qui fonctionne pour moi. Merci pour cela.
shifu
Cela ne fonctionnera pas si votre contenu modal est supérieur à la hauteur de l'écran (si votre modal doit défiler)
Brett Gregson
18

Tout ce que j'ai fait dans mon cas c'est de mettre le Top dans mon css en connaissant la hauteur du modal

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

dans mon css je mets

#myModal{
    height: 400px;
    top: calc(50% - 200px) !important;
}
Nerdroid
la source
1
En tant que noob à css, cette réponse semblait la moins effrayante et a fait le travail
Oded Ben Dov
2
Cela ne répond pas à la première partie de la question: "..quand vous ne connaissez pas la hauteur exacte du modal?"
natec
15

L'ajout de ce simple css fonctionne également.

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

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}
Ninja420
la source
Qu'est-ce que le fit-content?
Marc Roussel
12

Il existe un moyen le plus simple de le faire 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 suffit de l'appliquer à la .modal-dialogdivision de conteneur.

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

Dario Ferrer
la source
7
Ne répond pas sur mobile en raison de la largeur et de la hauteur fixes.
ianstigator
Votre réponse suppose que chaque appareil a la même résolution d'écran
Patricio Rossi
Personne. Je suppose que vous avez compris cet exemple et que vous êtes capable de l'adapter à chaque cas.
Dario Ferrer
Dans l'exécution de Bootstrap v3.3.0 réussie, merci
Amin Ghaderi
11

Développant l'excellente réponse de @ Finik, ce correctif n'est appliqué qu'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;
}
roo2
la source
8

La solution la plus universelle que j'ai écrite. Dynamicaly calcule avec la hauteur du dialogue. (L'étape suivante pourrait être de recalculer la hauteur des boîtes de dialogue 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', '');
        }
    });

});
Jan Renner
la source
7

J'ai trouvé la solution parfaite d' 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);
    });
});
Ismail Farooq
la source
1
Je vous remercie. Parfait pour moi avec un changement: dialog.css ("margin-top", Math.max (0, ($ (document) .scrollTop () + (($ (window) .height () - dialog.height ())) / 2))));
Viacheslav Soldatov
4
$('#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
    }
});
Ray Suelzer
la source
Avec quelques ajustements sur les sélecteurs, cela a fonctionné comme un charme. @$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
juliangonzalez
4

Voici une autre méthode uniquement CSS qui fonctionne plutôt bien et est basée sur ceci: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

toupet:

.modal {
    height: 100%;

    .modal-dialog {
        top: 50% !important;
        margin-top:0;
        margin-bottom:0;
    }

    //keep proper transitions on fade in
    &.fade .modal-dialog {
        transform: translateY(-100%) !important;
    }
    &.in .modal-dialog {
        transform: translateY(-50%) !important;
    }
}
phazei
la source
Comme avec d'autres transformsolutions, le problème se pose lorsque le modal a un contenu défilable (plus de contenu qu'il n'y a de contenu dans la fenêtre)
Steven Pribilinskiy
3

j'ai téléchargé bootstrap3-dialog à partir du lien ci-dessous et modifié la fonction ouverte 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;
} 
user3085452
la source
Voici une modification qui peut être appliquée dans votre propre code, sans avoir à changer la source BSDialog d'origine: gist.github.com/mahemoff/8ff6d3782d2da6f9cbb3 (juste quelques modifications au JS, aussi c'est écrit dans Coffee mais vous avez l'idée).
mahemoff
3

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

Essayez quelque chose comme ceci:

.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
    } 
Sergey Briskin
la source
1
Cela pourrait fonctionner très bien mais les modaux bootstrap ont des absolus, fixes à l'intérieur, à l'intérieur de ceci et cela ...: /
scooterlord
1
Qu'est-ce que ces classes ont à voir avec les modaux Bootstrap / Bootstrap?
lofihelsinki
1

Vous voudrez peut-être consulter cette collection de méthodes de centrage absolu d'un div: http://codepen.io/shshaw/full/gEiDt

Sevron
la source
1
Hm, il est dit dans les cavernes que vous devez déclarer la hauteur, ce qui n'est pas ce que je recherche
scooterlord
1

Une manière 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>    
Tuyen Cao
la source
1

encore une autre solution qui définira une position valide pour chaque modal visible sur window.resizeévénement et sur 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);
lenybernard
la source
1
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);
user3477026
la source
1

Je sais qu'il 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 navigateur mobile sur plusieurs postes de travail qui fonctionne partout comme il se doit.

Il a juste besoin modal-dialogd'être enveloppé dans une modal-dialog-wrapclasse et doit avoir les ajouts de code suivants:

.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 démarre centrée et en cas de contenu volumineux, elle se développe simplement verticalement jusqu'à ce qu'une barre de défilement apparaisse.

Voici un violon de travail pour votre plaisir!

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

scooterlord
la source
1

Ceci est assez ancien et demande spécifiquement une solution utilisant Bootstrap 3, mais pour tous ceux qui se demandent: à partir de 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, en utilisant la v4, il vous suffit d'ajouter .modal-dialog-centeredà .modal-dialogpour 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>
Tobold
la source
0

Pensez à utiliser le plugin bootstrap-modal trouvé ici - https://github.com/jschr/bootstrap-modal

Le plugin centrera tous vos modaux

Jeremy Lynch
la source
... malheureusement, j'avais essayé mais je ne pouvais pas le faire fonctionner correctement - du moins pas avec mon code. Je suppose que tout le monde doit personnaliser cela à ses besoins! Merci pour la réponse.
scooterlord
0

Pour le centrage, je ne comprends pas ce que sont les solutions trop compliquées. bootstrap le centre déjà horizontalement pour vous, vous n'avez donc pas besoin de jouer avec cela. 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 pendant le chargement à distance du contenu et l'utilisation de l'événement shown.ba.modal entraîne un 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 pour être aussi réactif.

Scott Flack
la source
si le modal est assez grand, cela peut causer des problèmes
scooterlord
0

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

vous devez simplement modalafficher la classe sous forme de tableau en suivant css:

display:table

et modal-dialogcommedisplay:table-cell

voir l'exemple de travail complet dans un violon donné

Innodel
la source
Je ne vois pas du tout de modal
ThaDafinser
La seule chose que je vois (dans Google Chrome) est une icône de croix rouge et la toile de fond
ThaDafinser
Pas de défilement lorsque le modal a plus de contenu qu'il n'y en a dans la fenêtre
Steven Pribilinskiy
0

ce n'est pas si compliqué.

veuillez essayer 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();
    });
});
M. Sun Lin
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; nous montrons le défilement sur les modaux, le défilement du corps 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

Dans une installation mobile, cela peut sembler 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>
Martian2049
la source