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?
modal-dialog-centered to . modal-dialog to vertically center the modal.
Example 1: First, we will design modal content for the sign-up then by using CSS we will align that modal centered(vertically). Using the vertical-align property, the vertical-align property sets the vertical alignment of an element.
Answer: Use the CSS margin-top Property This solution will dynamically adjust the alignment of the modal and always keep it in the center of the page even if the user resizes the browser window.
The .modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it.
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.
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);
};
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.
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);
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With