Rectangle 27 0

Twitter Bootstrap Center Modal Dialog?


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

With the negative margins, it causes the modal window to be off screen. Dropping the negative sign causes it to be way to low.

Note
Rectangle 27 0

Twitter Bootstrap Center Modal Dialog?


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

Hence this didn't work for me, I came up with my own solution: tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal (just in case for someone this does not work either)

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:

This works. For anyone else with the same issue, I removed the height and position attributes and changed margin-top to -90px.

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.

Note
Rectangle 27 0

Twitter Bootstrap Center Modal Dialog?


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

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.

Note
Rectangle 27 0

Twitter Bootstrap Center Modal Dialog?


dialog.css("margin-top", Math.max(0, ($(window).scrollTop()) + ($(window).height() - dialog.height()) / 2 ));
modal = $('.modal')
modal.css 'margin-top', ($(window).height() - modal.height()) / 2 - parseInt(modal.css('padding-top'))
Note
Rectangle 27 0

Twitter Bootstrap Center Modal Dialog?


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

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.

Note
Rectangle 27 0

Twitter Bootstrap Center Modal Dialog?


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

Twitter Bootstrap Center Modal Dialog?


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

Note
Rectangle 27 0

Twitter Bootstrap Center Modal Dialog?


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

and it solved the problem.

Note
Rectangle 27 0

Twitter Bootstrap Center Modal Dialog?


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

Hence this didn't work for me, I came up with my own solution: tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal (just in case for someone this does not work either)

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:

This works. For anyone else with the same issue, I removed the height and position attributes and changed margin-top to -90px.

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.

Note