我找到了一个很好的解决方案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>
现在看起来是什么样子:
我希望它看起来是什么样子:
EDIT尝试从中编写的代码不会产生预期的结果。
/* 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>
通过设置display:none来隐藏EDIT 2 /* Start。然后我们使用position:fixed将其定位为相对于视口窗口的位置。宽度、高度、顶部和左侧不言而喻。背景设置为80%白色,动画居中,无重复*/ .modalLoading {显示: flex;位置:固定;/z索引: 1000;/顶部: 0;右侧: 0;底部: 0;左侧: 0;对齐: 100%;宽度: 100%;/ /height-项目:居中;对齐-内容:居中;背景: rgba( 255,255,255,.8 ) /*url('http://i.stack.imgur.com/FhHRx.gif') */ url('') 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: flex;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
text-align: center;
margin-top: 100px;
}
发布于 2018-06-15 15:29:46
要使文本垂直居中,一种可能的解决方案是使用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;
}
https://stackoverflow.com/questions/50862688
复制相似问题