Twitter Bootstrap - Center Modal Dialog

Question

I'm trying to center a waiting screen modal dialog in the middle of the screen. Here is the modal dialog I'm trying to alter: http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap. How do I center it horizontally and vertically?

Answer 1

For standard jQuery/Coffeescript I used:

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

All credit goes to Sergey Barskiy.

Answer 2

I know it's a little late, but I found the solution to all the problems with centering the Bootstrap Modal with different heights than the standard's (one).

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

Answer 3

I have met such problem trying to show image (with arbitrary size) in Angular's UI Bootstrap modal. So

1. I have appended additional class name "width-auto" to a dialog div "modal". (In my case it was done with help of "windowClass" parameter)

2. I have wrote SCSS code:

   .width-auto { &.modal { text-align: center; } .modal-dialog, .modal-content { display: inline-block; width: auto; max-width: 99vw; overflow: hidden; } }

and it solved the problem.

Answer 4

This is just matter of applying some CSS to the pleaseWaitDialog ID. You have to set position:absolute and the margin-top and margin-left need to be half of the height and width. So your CSS should look something like this:

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

You will need to play with the numbers in order to achieve the box size that fits what you want but that should get you started.

Answer 5

Here is another suggestion, that does not involve hard-coding of margins. it is using Angular, but you can replace element with $. It animates the margin, simulating 'fade" class in 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);
        };