javascript - 如何使用Pace.JS在加载过程中显示Div

每当我对REST服务进行AJAX调用时，我都会使用Pace.JS显示加载程序。 Pace在这里工作正常，除了在加载程序旋转时页面仍然是交互式的。在尝试加载数据时，我真的不希望页面是交互式的。

要解决此问题，我想在Pace.JS加载动画处于 Activity 状态时显示一个div(具有高不透明度的白色以模拟模态)，其Z-Index为1999，覆盖整个页面(宽度/高度= 100％)。在Z-Index 2000上，因此它位于模态顶部)，并在Pace.JS加载动画完成后隐藏div，以限制用户在加载数据时可以与之交互的内容。

我已经在Pace.JS Hubspot主页(http://github.hubspot.com/pace/)上看到了事件(开始，重新启动，隐藏)，但是没有实际使用它的示例，我尝试过的所有方法都没有用。

有人可以张贴一个例子来说明我要做什么吗？它将确实非常有帮助。谢谢!

最佳答案

您可以通过以下方法实现目标:

CSS:

div.paceDiv {
   position: absolute;
   width: 100%;
   height: 100%;
   ...
   display: none;
}

JS:

Pace.on("start", function(){
    $("div.paceDiv").show();
});

Pace.on("done", function(){
    $("div.paceDiv").hide();
});

希望还不算太晚!