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以使其隐藏。然后我们将它相对于视口窗口定位位置：固定。宽度，高度，顶部和左侧说话为了自己。背景我们设置为80％白色我们的动画居中，不重复* / .modalLoading { 显示：flex; 位置：固定; / z-index：1000; / 顶部：0; 右：0; 底部：0; 左：0; / 身高：100％; 宽度：100％; / align-items：center; 辩解内容：中心; 背景：rgba（255,255,255，.8） / * url（＆＃39; http://i.stack.imgur.com/FhHRx.gif＆＃39;）* / URL（＆＃39;＆＃39;） 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;
}

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

1 个答案: