Comment afficher Div pendant le chargement avec Pace.JS

Question

J'utilise Pace.JS pour afficher un chargeur chaque fois que je fais des appels AJAX à un service REST. Pace fonctionne parfaitement ici sauf, la page est toujours interactive pendant que le chargeur tourne. Je ne veux vraiment pas que la page soit interactive pendant que j'essaye de charger des données.

Pour corriger cela, je veux montrer un div (blanc avec une haute opacité pour simuler un modal) avec un Z-Index de 1999 couvrant la page entière (largeur/hauteur = 100%) tandis que le Pace.JS chargement l'animation est active (à Z-Index 2000 donc il est assis sur le modal), et cache la div quand l'animation de chargement de Pace.JS est terminée pour limiter ce qu'un utilisateur peut interagir pendant que je charge des données.

J'ai vu les événements (démarrer, redémarrer, masquer) sur la page d'accueil de hubspot Pace.JS (http://github.hubspot.com/pace/) mais il n'y a pas d'exemples d'utilisation réelle et tout ce que j'ai essayé n'a pas fonctionné.

Quelqu'un peut-il poster un exemple de comment faire ce que je cherche? Cela m'aiderait vraiment, vraiment. Merci!

Answer 1

Vous pouvez atteindre votre objectif avec ce qui suit:

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

Espoir il est pas trop tard si!

Answer 2

Ceci est un ancien poste, mais je l'ai résolu ce juste avec 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;}