Cách hiển thị Div trong khi nạp với Pace.JS

Question

Tôi đang sử dụng Pace.JS để hiển thị trình tải bất cứ khi nào tôi thực hiện cuộc gọi AJAX đến dịch vụ REST. Pace đang hoạt động hoàn hảo ở đây ngoại trừ, trang vẫn tương tác trong khi bộ nạp đang quay. Tôi thực sự không muốn trang tương tác trong khi tôi đang cố tải dữ liệu.

Để khắc phục điều này, tôi muốn hiển thị div (màu trắng có độ mờ đục cao để mô phỏng phương thức) với Z-Index năm 1999 bao phủ toàn bộ trang (chiều rộng/chiều cao = 100%) trong khi tải Pace.JS hoạt hình hoạt động (tại Z-Index 2000 để nó nằm trên đầu trang của phương thức) và ẩn div khi hoạt ảnh tải Pace.JS hoàn tất để giới hạn những gì người dùng có thể tương tác trong khi tôi đang tải dữ liệu.

Tôi đã nhìn thấy các sự kiện (bắt đầu, khởi động lại, ẩn) trên trang chủ Pace.JS hubspot (http://github.hubspot.com/pace/) nhưng không có ví dụ thực sự sử dụng và mọi thứ tôi đã thử chưa hoạt động.

Ai đó có thể đăng một ví dụ về cách thực hiện những gì tôi đang tìm kiếm không? Nó thực sự, thực sự giúp tôi. Cảm ơn!

Answer 1

Bạn có thể đạt được mục tiêu của bạn với những điều sau đây:

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

Hy vọng nó không quá muộn mặc dù!

Answer 2

Đây là một bài cũ, nhưng tôi đã cố định này chỉ với 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;}