在所有元素上顯示全屏不確定進度條

我想在所有屏幕元素上顯示全屏不確定進度欄。我的使用案例如下：在所有元素上顯示全屏不確定進度條

用戶會看到一個表單，其中包含一個電子郵件ID字段。用戶輸入電子郵件ID並通過ajax將該id與數據庫進行匹配。雖然此操作正在進行中，並且正在等待通過ajax控制器進行的響應，但我希望全屏進度微調器在窗口的整個區域都可見，並且必須有文本「加載....」。發生這種情況時，必須禁用所有其他控件。即，我想在所有控件上設置圖像。

驗證郵件後，我想隱藏該圖片。

我在許多網站都看到過類似的效果（此時不能回憶）。所以我怎麼做（設置的z-index對我不起作用）

編輯：

見odesk.com的這張截圖。

enter image description here

來源

2014-10-19 rahulserver

你是什麼acutal問題？你不知道如何確定Ajax動作的開始和結束，還是你有問題的CSS部分？你應該顯示你到目前爲止嘗試過的。 – 2014-10-19 17:25:49

@NicoO不確定進度條意味着像一個圓形旋轉，直到任務完成。 – rahulserver 2014-10-19 17:27:43

試過'beforeSend'（開始進度），'complete'（停止進度）'$ .ajax（）'選項？如果可能，可以發佈'html'，'js'？謝謝 – guest271314 2014-10-19 17:32:04

它是在一個函數調用Ajax：如您在左側欄搜索工作，並檢查/取消選中一個類別，將出現此進度條。？如果是這樣，在函數內部添加gif和文本，那麼當ajax完成時，它將輸出到頁面，覆蓋gif。我有這樣的事情

function ajaxrequest() { 
    var waitingimage="<img src='js/ajax-loader.gif'>"; 
    document.getElementById('ajax_results').innerHTML =waitingimage;

那麼，在年底可以覆蓋它

if (xhr.status == 200 && xhr.status < 300) {   
document. getElementById   ('ajax_results').innerHTML = xhr.responseText;

來源

2014-10-19 17:27:51 Billy

在所有元素上顯示全屏不確定進度條

回答

相關問題