我正在使用jQuery UI对话框在用户按下某个按钮时显示一个简单的加载器(以防止用户与页面交互)。该按钮触发一个 AJAX 请求，该请求更新网站的某个部分(即页脚)。
问题 1 - 首次演出时高度不正确
我的第一个问题是第一次显示对话框时，它的高度是 51px，而不是声明的 94px。事实上，我发现无论我将高度设置为什么，尽管我设置了minHeight和maxHeight参数，它首次显示时总是少 43px。
问题 2 - 如果滚动页面，则垂直居中关闭
接下来，我注意到当我向下滚动页面时，Dialog也会显示在页面下方。我的位置目标是window(默认值)，所以这不应该发生。
有人知道如何解决这些问题吗？谢谢。
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;
}
首次显示时对话框高度不正确
正如我的问题中所指出的，Dialog的高度在第一场演出中总是不正确的。为了解决这个问题，我隐式声明了我在open函数中Dialog内容容器所需的高度 -
$(this).closest('.ui-dialog').children('.ui-dialog-content').css('height', '80px');
由于对话框将始终保持相同的高度，因此在这种情况下很好。但是，对于希望拥有可变高度Dialog的用户来说，这并不好。因此，如果有人知道更明确的答案，我将不胜感激您发布它。
垂直位置偏离中心
我问题的下一部分集中在如果网页垂直滚动，则显示时Dialog变得偏离中心(垂直)。
为了解决这个问题，我使用了position属性的using参数。
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);
}
在发现答案之前，我首先记录了target和element的值(即console.log(target))。这让我看到target.top被错误地计算了。我的意思是，如果我的目标是window，顶部应该始终0。但是，target.top而是计算为我垂直滚动的已定义height的相对百分比。
例如，如果height200并且我向下滚动了页面的 75%，则target.top设置为150。这反过来又扭曲了element.element.top的计算，这意味着它被推低了这个数量。
完整的解决方案
如果您希望使用此解决方案，请注意，该问题的HTML和CSS保持不变。
$('#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');
}
});