jQuery UI Dialog - Height always incorrect on first show, and vertical centering incorrect when page is scrolled - height

Question

I am using a jQuery UI Dialog to show a simple loader when the user presses a certain button (to prevent the user interacting with the page). The button fires an AJAX request which updates a certain part of the website (I.e. the footer).
Problem 1 - Incorrect height on first show
My first problem is that the first time the Dialog is displayed it's height is 51px, not 94px as declared. In fact I've discovered that it's always 43px less on first display, no matter what I set the height to, and despite the fact that I have the minHeight and maxHeight parameters set.
Problem 2 - Vertical centreing is off if the page is scrolled
Next, I've noticed that as I scroll down the page, the Dialog is displayed further down the page also. My positional target is window (the default), so this should not be happening.
Does anybody know how to fix these problems? Thanks.
JavaScript
$('#loading-dialog').dialog({
autoOpen: false,
closeOnEscape: false,
draggable: false,
height: 94,
maxHeight: 94,
minHeight: 94,
modal: true,
resizable: false,
width: 350,
open: function(event, ui){
$(this).closest('.ui-dialog').css({ // Remove the borders and padding
'background-image': 'none',
'border': 'none',
'padding': '0'
});
$(this).closest('.ui-dialog').children('.ui-dialog-titlebar').css('display', 'none');
$(this).closest('.ui-dialog').children('.ui-dialog-buttonpane').css('display', 'none');
}
});
/** Show the AJAX loader */
$('#loading-dialog').dialog('open');
/** Hide the AJAX loader */
$('#loading-dialog').dialog('close');
HTML
<div id="loading-dialog">
<div id="loading-dialog-inside">
<span id="custom-admin-preview-spinner"> </span>
<h2>Generating preview...</h2>
</div>
</div>
CSS
#loading-dialog{
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
display: none;
text-align: center;
}
#loading-dialog-inside{
display: inline-block;
margin: 13px auto;
}
#loading-dialog-inside h2{
display: inline-block;
vertical-align: middle;
}
#custom-admin-preview-spinner{
background-image: url('../ajax-spinner.gif');
display: inline-block;
height: 48px;
margin: 0 20px 0 0;
vertical-align: middle;
width: 48px;
}

Answer 1

Dialog height incorrect on first show
As noted in my question, the height of the Dialog was always incorrect on the first show. To fix this I implicitly declared the height that I required for the Dialog content container in the open function -
$(this).closest('.ui-dialog').children('.ui-dialog-content').css('height', '80px');
As the dialog will always be the same height, it's fine in this instance. However, it's no good for users who wish to have a variable-height Dialog. Therefore if anyone knows a more definitive answer, I'd appreciate you posting it.
Vertical position off centre
The next part of my question focused on the Dialog becoming off-centre (vertically) when it was shown, if the webpage was scrolled vertically.
To fix this I made use of the using parameter of the position property. -
using: function(target, element){
/** Set the 'left' and 'top' values correctly so that the dialog is displayed in the centre of the screen */
target.left = Math.ceil(($(window.top).width() / 2) - (element.element.width / 2));
target.top = Math.ceil(($(window.top).height() / 2) - (element.element.height / 2));
/** Update the CSS of the target element */
$(this).closest('.ui-dialog').css(target);
}
Before discovering the answer I first logged the values of target and element (I.e. console.log(target)). This allowed me to see that target.top was being incorrectly calculated. What I mean by that is that if my target is window, top should always be 0. However, target.top was instead being calculated as the relative percentage of the defined height that I vertically scrolled.
For example, if height is 200 and I scrolled 75% of the way down the page, target.top was being set to 150. This in turn skewed the calculation of element.element.top, meaning it was pushed down the page by that amount.
The full solution
Should you wish to use this solution, note that the HTML and CSS from the question remain as they were.
$('#loading-dialog').dialog({
autoOpen: false,
closeOnEscape: false,
draggable: false,
height: 94,
hide: 400,
maxHeight: 94,
minHeight: 94,
modal: true,
position: {
my: 'center',
at: 'center',
of: window,
collision: 'none',
using: function(target, element){
/** Set the 'left' and 'top' values correctly so that the dialog is displayed in the centre of the screen */
target.left = Math.ceil(($(window.top).width() / 2) - (element.element.width / 2));
target.top = Math.ceil(($(window.top).height() / 2) - (element.element.height / 2));
/** Update the CSS of the target element */
$(this).closest('.ui-dialog').css(target);
}
},
resizable: false,
show: 400,
width: 350,
open: function(event, ui){
/** Style the dialog box */
$(this).closest('.ui-dialog').css({ // Remove the borders and padding
'background-image': 'none',
'border': 'none',
'padding': '0',
'position': 'fixed'
});
$(this).closest('.ui-dialog').children('.ui-dialog-content').css('height', '80px');
$(this).closest('.ui-dialog').children('.ui-dialog-titlebar').css('display', 'none');
$(this).closest('.ui-dialog').children('.ui-dialog-buttonpane').css('display', 'none');
/** Style the overlay */
$('.ui-widget-overlay').css('background-image', 'none');
}
});