9

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?

Anonymous1
  • 3,877
  • 3
  • 28
  • 42

5 Answers5

16

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.

Iulius Curt
  • 4,984
  • 4
  • 31
  • 55
crazymatt
  • 3,266
  • 1
  • 25
  • 41
  • 2
    This works. For anyone else with the same issue, I removed the height and position attributes and changed margin-top to -90px. – Anonymous1 Sep 09 '13 at 05:41
  • Hence this didn't work for me, I came up with my own solution: http://tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal (just in case for someone this does not work either) – klickagent.ch Jun 07 '14 at 20:44
  • 3
    [This](http://www.abeautifulsite.net/vertically-centering-bootstrap-modals/) one is more perfect! – Ravi Dhoriya ツ Aug 14 '15 at 11:54
4

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);
        };
Sergey Barskiy
  • 1,761
  • 2
  • 15
  • 17
2

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.

Micah Winkelspecht
  • 1,805
  • 1
  • 16
  • 7
  • This is great, but if the user has scrolled far down enough. The modal wont be seen. You can take into account the amount the user has scrolled by modifying your margin-top: `dialog.css("margin-top", Math.max(0, ($(window).scrollTop()) + ($(window).height() - dialog.height()) / 2 ));` – hellojebus May 26 '15 at 17:18
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);
    }
});
alex89x
  • 479
  • 4
  • 14
  • With the negative margins, it causes the modal window to be off screen. Dropping the negative sign causes it to be way to low. – Adam Lewis Dec 09 '15 at 15:24
0

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.

Alexander Levakov
  • 123
  • 1
  • 4