Twitter Bootstrap - Centre De Dialogue Modale

Je suis en train de centre, un écran en attente de dialogue modale dans le milieu de l'écran. Voici la boîte de dialogue modale je suis en train de modifier: http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap. Comment faire pour centrer horizontalement et verticalement?

InformationsquelleAutor Anonymous1 | 2013-09-09
  1. 16

    C'est juste de la question de l'application d'un peu de CSS pour le pleaseWaitDialog ID. Vous devez définir position:absolute et la margin-top et margin-left besoin pour être la moitié de la hauteur et la largeur. Si votre CSS devrait ressembler à quelque chose comme ceci:

    #pleaseWaitDialog {
    width: 400px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -200px;
    padding: 20px;
}

    Vous aurez besoin de jouer avec les nombres dans l'ordre pour atteindre la taille de la boîte qui correspond à ce que vous voulez, mais qui devrait vous obtenir a commencé.

    • Les travaux de cette. Pour quelqu'un d'autre avec le même problème, j'ai enlevé la hauteur et la position des attributs et changé margin-top à 90px.
    • Donc, cela ne fonctionne pas pour moi, je suis venu avec ma propre solution: réglages.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal (juste au cas où quelqu'un, cela ne fonctionne pas non plus)
    • Ceci on est plus parfait!
    InformationsquelleAutor crazymatt
  2. 4

    Voici une autre suggestion, qui n'implique pas de codage en dur des marges. c'est à l'aide Angulaire, mais vous pouvez remplacer l'élément $. Il anime la marge, la simulation de "fondu" de la classe dans le bootstrap.

            var resize = function () {
            var dialog = angular.element('#globalPleaseWaitDialog .modal-dialog');
            dialog.css('margin-top', (angular.element(that.$window).height() - dialog.height()) / 2 - parseInt(dialog.css('padding-top')));
        };

        var animate = function () {

            var dialog = angular.element('#globalPleaseWaitDialog .modal-dialog');
            dialog.animate({ 'margin-top': (angular.element(that.$window).height() - dialog.height()) / 2 - parseInt(dialog.css('padding-top')) }, 'slow');
            pleaseWaitDiv.off('shown.bs.modal', animate);

        };

        this.showPleaseWait = function () {
            angular.element($window).on('resize', resize);
            pleaseWaitDiv.on('shown.bs.modal', animate);
            pleaseWaitDiv.modal();
        };

        this.hidePleaseWait = function () {
            pleaseWaitDiv.modal('hide');
            angular.element($window).off('resize', resize);
        };
    InformationsquelleAutor Sergey Barskiy
  3. 3

    Je sais que c'est un peu tard, mais j'ai trouvé la solution à tous les problèmes avec centrage de la Modal Bootstrap avec différentes hauteurs de la norme (un).

    $("#yourModal").modal('show').css({
    'margin-top': function () { //vertical centering
        return -($(this).height() / 2);
    },
    'margin-left': function () { //Horizontal centering
        return -($(this).width() / 2);
    }
});
    • Avec les marges négatives, il provoque la fenêtre modale pour être hors de l'écran. Déposer le signe négatif entraîne moyen à faible.
    InformationsquelleAutor alex89x
  4. 2

    Standard jQuery/Coffeescript, j'ai utilisé:

    modal = $('.modal')
modal.css 'margin-top', ($(window).height() - modal.height()) / 2 - parseInt(modal.css('padding-top'))

    Tout le crédit va à Sergey Barskiy.

    • C'est super, mais si l'utilisateur a défilée assez de recul. Le modal ne sera pas vu. Vous pouvez prendre en compte la valeur que l'utilisateur a défilé en modifiant votre margin-top: dialog.css("margin-top", Math.max(0, ($(window).scrollTop()) + ($(window).height() - dialog.height()) / 2 ));
    InformationsquelleAutor Micah Winkelspecht
  5. 0

    J'ai rencontré ce problème en essayant de montrer l'image (avec taille arbitraire) dans Angulaire de l'INTERFACE utilisateur de Bootstrap modal. Donc

    1. J'ai ajouté classe supplémentaire nom "largeur automatique" pour un dialogue div "modal".
      (Dans mon cas, il était effectué avec l'aide de "windowClass" paramètre)

    2. J'ai écrit SCSS code:

      .largeur-auto {
      &.modal {
      text-align: center;
      }
      .modale de dialogue .modal-content {
      display: inline-block;
      width: auto;
      max-width: 99vw;
      overflow: hidden;
      }
      }

    et il a résolu le problème.

    InformationsquelleAutor Alexander Levakov