height - jQuery UI 对话框 - 首次显示时高度始终不正确，并且滚动页面时垂直居中不正确

Question

我使用 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">&nbsp;</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 的高度在第一次显示时总是不正确。为了解决这个问题，我在 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，那么 top 应该始终是 0。但是，target.top 被计算为我垂直滚动的定义height 的相对百分比。

例如，如果高度为200并且我向下滚动页面的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');
                
    }
});