使用Pace.JS如何在加載過程中顯示Div

[英]How to Show Div During Load with Pace.JS


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.

我正在使用Pace.JS在我向REST服務進行AJAX調用時顯示加載器。 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加載動畫處於活動狀態時顯示一個div(白色具有高不透明度以模擬模態),其Z-Index為1999覆蓋整個頁面(寬度/高度= 100%)在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!

有人可以發布一個如何做我正在尋找的例子嗎?這真的對我有幫助。謝謝!

2 个解决方案

#1


15  

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!

希望不會太晚了!

#2


-1  

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2014/05/05/729bed18b12befab813cbe4f08402f21.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com