web-dev-qa-db-fra.com

Twitter Bootstrap - Dialogue modal au centre

J'essaie de centrer un dialogue modal d'écran en attente au milieu de l'écran. Voici le dialogue modal que j'essaie de modifier: http://dotnetspeak.com/2013/05/creating-simple-please-please-wait-dialog-with-Twitter-bootstrap . Comment le centrer horizontalement et verticalement?

twitter-bootstrapmodal-dialog
9
Anonymous1

Il s’agit simplement d’appliquer du code CSS à l’identifiant pleaseWaitDialog. Vous devez définir position:absolute et les margin-top et margin-left doivent être égaux à la moitié de la hauteur et de la largeur. Donc, votre CSS devrait ressembler à quelque chose comme ça:

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

Vous devrez jouer avec les chiffres pour obtenir la taille de boîte qui vous convient, mais qui devrait vous aider à démarrer.

16
crazymatt

Voici une autre suggestion, qui n'implique pas de codage en dur des marges. il utilise Angular, mais vous pouvez remplacer element par $. Il anime la marge en simulant la classe "fade" 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);
        };
4
Sergey Barskiy

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

$("#yourModal").modal('show').css({
    'margin-top': function () { //vertical centering
        return -($(this).height() / 2);
    },
    'margin-left': function () { //Horizontal centering
        return -($(this).width() / 2);
    }
});
3
alex89x

Pour jQuery/Coffeescript standard, j'ai utilisé:

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

Tout le mérite revient à Sergey Barskiy.

2
Micah Winkelspecht

J'ai rencontré un tel problème en essayant d'afficher une image (avec une taille arbitraire) dans l'interface modale UI Bootstrap d'Angular. Alors

  1. J'ai ajouté le nom de classe supplémentaire "width-auto" à un dialogue div "modal" . (Dans mon cas, cela a été fait à l'aide du paramètre "windowClass") 

  2. J'ai écrit le code SCSS:

    .width-auto { & .modal { text-align: center; } .modal-dialog, .modal-content { display: inline-block; largeur: auto; largeur maximale: 99vw; débordement caché; } }

et cela a résolu le problème.

0
Alexander Levakov