Question

我使用Pace.JS在我向REST服务进行AJAX调用时随时显示加载器。 Pace在这里工作得很好，除了在装载机旋转时页面仍然是交互式的。在我尝试加载数据时，我真的不希望页面是交互式的。

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

我已经在Pace.JS hubspot主页（http://github.hubspot.com/pace/）上看到了这些事件（启动，重新启动，隐藏），但没有实际使用它的示例以及我尝试过的所有内容＃39; t work。

有人可以发布一个如何做我正在寻找的事情的例子吗？这真的，真的对我有帮助。谢谢！

Answer 1

您可以通过以下方式实现目标：

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();
});

希望它不会太迟！

Answer 2

这是一篇旧帖子，但我已经用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;}

如何在Pace.JS加载期间显示Div

2 个答案: