ajax - 如何在 Ajax 调用/HTML 阻塞期间在旋转 gif 上方添加文本

Question

我找到了一个很好的解决方案 here在长时间(8-12 秒)Ajax 调用期间添加一个旋转的 GIF，但我无法弄清楚如何将一些文本垂直居中放置在 GIF 上方，无论屏幕大小如何，这些文本都将保持在相同的相对位置。

这是我目前所拥有的:

<style>
    /* Start by setting display:none to make this hidden.
       Then we position it in relation to the viewport window
       with position:fixed. Width, height, top and left speak
       for themselves. Background we set to 80% white with
       our animation centered, and no-repeating */
    .modalLoading {
        display:    none;
        position:   fixed;
        z-index:    1000;
        top:        0;
        left:       0;
        height:     100%;
        width:      100%;
        text-align: center;
        background: rgba( 255, 255, 255, .8 ) 
                    /*url('http://i.stack.imgur.com/FhHRx.gif') */
                    url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
                    50% 50% 
                    no-repeat;
    }

    /* When the body has the loading class, we turn
       the scrollbar off with overflow:hidden */
    body.loading .modalLoading {
        overflow: hidden;   
    }

    /* Anytime the body has the loading class, our
       modal element will be visible */
    body.loading .modalLoading {
        display: block;
    }
    .modalFont {
        color:#8B0000;
        font-size: 20px;
        font-weight:900;
        font-family: 'Roboto', sans-serif;
    }

</style>

这个 DIV 在我正文部分的底部:

<div class="modalLoading">
    <div style="margin-top:25px">           
        <span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
        Do not click the back button or close this browser tab.</span>            
    </div>
</div>

现在的样子:

我希望它看起来像什么:

编辑尝试来自的代码不会产生预期的结果。

    /* Start by setting display:none to make this hidden.
       Then we position it in relation to the viewport window
       with position:fixed. Width, height, top and left speak
       for themselves. Background we set to 80% white with
       our animation centered, and no-repeating */
    .modalLoading {
        display:    none; /* if this is set to 'Flex' then the modal blocking appears on page refresh */
        position:   fixed;
        /*z-index:    1000;*/
        top:        0;
        right:      0;
        bottom:     0;
        left:       0;
        /*height:     100%;
        width:      100%;*/
        align-items: center;
        justify-content: center;
        background: rgba( 255, 255, 255, .8 ) 
                    /*url('http://i.stack.imgur.com/FhHRx.gif') */
                    url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
                    50% 50% 
                    no-repeat;
    }

    /* When the body has the loading class, we turn
       the scrollbar off with overflow:hidden */
    body.loading .modalLoading {
        overflow: hidden;   
    }

    /* Anytime the body has the loading class, our
       modal element will be visible */
    body.loading .modalLoading {
        display: block;
    }

    .modalFont {
        color:#8B0000;
        font-size: 20px;
        font-weight:900;
        font-family: 'Roboto', sans-serif;
        text-align: center;
        margin-top: 100px;
    }

<div class="modalLoading">         
    <span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
    Do not click the back button or close this browser tab.</span>            
</div>

编辑 2 /* 首先设置 display:none 使其隐藏。 然后我们相对于视口(viewport)窗口定位它 位置:固定。宽度、高度、顶部和左侧说话 为他们自己。我们将背景设置为 80% 白色 我们的动画居中，不重复 */ .modalLoading { 显示: flex ； 位置:固定； /z-index: 1000;/ 顶部:0； 右:0； 底部:0； 左:0； /高度:100%； 宽度:100%；/ 对齐元素:居中； 证明内容:居中； 背景:rgba(255、255、255、.8) /*url(' http://i.stack.imgur.com/FhHRx.gif ') */ 网址('') 50% 50% 不重复；

    /* When the body has the loading class, we turn
       the scrollbar off with overflow:hidden */
    body.loading .modalLoading {
        overflow: hidden;   
    }

    /* Anytime the body has the loading class, our
       modal element will be visible */
    body.loading .modalLoading {
        display: flex;
    }

    .modalFont {
        color:#8B0000;
        font-size: 20px;
        font-weight:900;
        font-family: 'Roboto', sans-serif;
        text-align: center;
        margin-top: 100px;
    }

Answer 1

要使文本垂直居中，一个可能的解决方案是使用 flexbox。使用此 HTML:

<div class="modalLoading">

        <span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
        Do not click the back button or close this browser tab.</span>            

</div>

你可以写这个 CSS:

.modalLoading{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba( 255, 255, 255, .8 ) url('http://i.stack.imgur.com/FhHRx.gif')  50% 50% no-repeat;

}

.modalFont{
    margin-top: 100px; /* margin to move the text a little lower than gif loader. Change this margin with -100px if you want it to appear above the gif */
    text-align: center;
}

编辑 1

为了仅在 AJAX 调用后工作，我只编辑了 CSS 而我之前编写的 HTML 没有改变:

.modalLoading {
        display:    none; /* hidden when refresh the page */
        position:   fixed;
        z-index:    1000;
        top:        0;
        right:      0;
        bottom:     0;
        left:       0;

        /*height:     100%;
        width:      100%;*/
        align-items: center;
        justify-content: center;
        background: rgba( 255, 255, 255, .8 ) 
                    url('http://i.stack.imgur.com/FhHRx.gif') 
                    50% 50% 
                    no-repeat;
    }


    body.loading .modalLoading {
        overflow: hidden;   
    }


    body.loading .modalLoading {
        display: flex; /*display using Flexbox */
    }

    .modalFont{
    margin-top: 100px; /* margin to move the text a little lower than gif loader. Change this margin with -100px if you want it to appear above the gif */
    text-align: center;
}