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

我正在使用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/ ）上看到了这些事件（启动，重启，隐藏）但是没有实际使用它的例子和我尝试过的所有东西没事。

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

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

这是一个老post，但我已经用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;}