javascript 如何在使用 Pace.JS 加载期间显示 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23482873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Show Div During Load with Pace.JS
提问by Capt. Rochefort
I'm using Pace.JS to display a loader anytime I make AJAX calls to a REST service. Pace is working perfectly here except, the page is still interactive while the loader is spinning. I really don't want the page to be interactive while I'm trying to load data.
每当我对 REST 服务进行 AJAX 调用时，我都会使用 Pace.JS 来显示加载器。Pace 在这里工作得很好，除了在加载器旋转时页面仍然是交互式的。当我尝试加载数据时，我真的不希望页面具有交互性。
To fix this, I want to SHOW a div (white with a high opacity to simulate a modal) with a Z-Index of 1999 covering the entire page (width/height = 100%) while the Pace.JS loading animation is active (at Z-Index 2000 so it's sitting on top of the modal), and hide the div when the Pace.JS loading animation is complete to limit what a user can interact with while I'm loading data.
为了解决这个问题，我想在 Pace.JS 加载动画处于活动状态（在 Z-Index 2000 所以它位于模态的顶部），并在 Pace.JS 加载动画完成时隐藏 div 以限制用户在加载数据时可以交互的内容。
I've seen the events (start, restart, hide) on the Pace.JS hubspot homepage (http://github.hubspot.com/pace/) but there are no examples of actually using it and everything I've tried hasn't worked.
我在 Pace.JS hubspot 主页 ( http://github.hubspot.com/pace/) 上看到了事件（开始、重启、隐藏），但没有实际使用它的例子，我尝试过的一切都没有没用。
Can someone post an example of how to do what I'm looking for? It would really, really help me. Thanks!
有人可以发布一个如何做我正在寻找的例子吗？它真的会帮助我。谢谢！
回答by John Brunner
You can achieve your goal with the following:
您可以通过以下方式实现您的目标：
CSS:
CSS：
div.paceDiv {
position: absolute;
width: 100%;
height: 100%;
...
display: none;
}
JS:
JS：
Pace.on("start", function(){
$("div.paceDiv").show();
});
Pace.on("done", function(){
$("div.paceDiv").hide();
});
Hope it's no too late though!
不过希望现在还不算太晚！
回答by Jorge Salitre
This is a old post, but i've fixed this just with css
这是一个旧帖子，但我已经用 css 修复了这个问题
pace-running::after {
position: absolute;
background-color: #ffffff;
opacity: 0.1;
top:0;
left: 0;
right: 0;
width: 100%;
height: 100%;
content: ' ',
z-index: 9998;}
