爲我的html頁面創建一個微調框

Question

我有一個用戶需要提交給服務器的web表單。服務器響應可能需要幾秒鐘。所以我想向用戶展示一個微調，這樣所有其他字段變灰，並且用戶在網絡表單中進行了任何更改，並且在中心我有一個微調控制器可以繼續旋轉..請幫助我如何繼續。

Answer 1

這裏是我的完整的解決方案，使用Ajax發送查詢（你不能有一個微調，如果你使用的標準格式後離開頁面）：

loading = { 
    count: 0 
}; 

loading.finish = function() { 
    this.count--; 
    if (this.count==0) this.$div.hide(); 
}; 

// 
loading.start = function() { 
    this.count++; 
    if (!this.$div) { 
     var html = '<div style="position: fixed;z-index:100;left:0;top:0;right:0;bottom:0;background: black;opacity: 0.6;">'; 
     html += '<table width=100% height=100%>'; 
     html += '<tr><td align=center valign=middle>'; 
     html += '<img src=img/loading.gif>'; 
     html += '</td></tr>'; 
     html += '</table></div>'; 
     this.$div=$(html); 
     this.$div.prependTo('body'); 
    } 
    setTimeout(function(){ 
     if (loading.count>0) loading.$div.show(); 
    }, 500); 
}; 

// the function to call 
askUrl = function(url, success) { 
    var httpRequest = new XMLHttpRequest(); 
    httpRequest.onreadystatechange = function() { 
     if (httpRequest.readyState === 4) { 
      if (httpRequest.status === 200) { 
       success(msg); 
      } 
      loading.finish(); 
     } 
    }; 
    loading.start(); 
    httpRequest.open('GET', url); 
    httpRequest.send(); 
}; 

如果調用askUrl和服務器沒有按在500毫秒內回答，屏幕變灰，並顯示一個微調框。

我得到了我的gif微調here。