顯示加載微調，並防止在頁面上的任何其他行動

我有一個asp.net MVC3的Web應用程序，其中我搜索一定的標準，並顯示在網格中的搜索結果，單擊網格中的行將結果加載到新頁面中。同時，當我點擊表中的行時，我在表格頂部顯示一個加載圖像。我在行選擇中顯示微調。顯示加載微調，並防止在頁面上的任何其他行動

function onRowSelected(e) { 
    var grid = $(this).data('tGrid'); 
    // populate some data here 
    $("#spinner").show(); 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "/Search/GetResults", 
     data: populate the data to be sent, 
     dataType: "text json", 
     success: 
     function (data, textStatus) { 
      if (data != "Success") { 
       ShowError(data); 
      } 
      else { 
       window.location.href = "/Search/Test/"; 
       } 
     }, 
     error: 
     function (XMLHttpRequest, textStatus, errorThrown) { 
      alert("Error Occured!"); 

     } 

    }); 
}

和微調的代碼是：

<div id='spinner' style='display:none;'><center><img alt='' src='../../Images/loading.gif' title='Loading...' /><b>Loading...</b></center> </div>

我的問題是，當用戶選擇一行，並顯示加載符號時，他能夠點擊另一行。我想阻止用戶在加載微調器可見時單擊或選擇頁面上的任何內容。任何幫助

UPDATE：

我的問題是不是與裝載圖像位置..我希望它顯示爲覆蓋或者諸如此類的東西，使後面的頁面會變成灰色，用戶可以「T選擇什麼

來源

2012-05-11 TRR

除了人們提供的CSS解決方案之外，也許您可以從表格行中解除綁定相關事件。甚至暫時禁用它們。 – Peter

您可以定義一個JavaScript變量，說bool_spinner，這是默認false但顯示的微調，當設置爲true，並且數據被加載後會被重新設置爲false。

然後，您可以在函數內部（如onRowSelected內部）測試此變量，以根據微調器的狀態控制發生的情況。

那麼你也許可以用這樣的（未經測試），以防止其他活動HTML元素（如鏈接和表單提交按鈕）的反應，當你點擊頁面上：

$("body").click(function(e) { 
    if (bool_spinner) e.preventDefault(); 
}

編輯：您可以還要檢查什麼已被點擊，如果你需要的話，像這樣：

var target = $(e.target); 
    if (target.is("#tGrid")) { 
     etc.   
    }

UPDATE：其實，你甚至都不需要設置一個新的腳本變量，你可以直接test the state你飛旋：

if ($('#spinner').is(':hidden')) { 
    etc. 
}

來源

2012-05-11 07:19:39 Stefan

而不是添加一個標誌我想顯示加載符號的一種疊加 – TRR

@rutwikreddy正如在這個線程中提到的，你可以將css應用到你的spinner div，它會變成這樣一個覆蓋層。這裏也是一個jQuery「block user interaction」插件，它可能是你需要的：http://malsup.com/jquery/block/ – Stefan

我使用了塊UI，它爲我工作，謝謝 – TRR

嘗試增加css樣式到您的#spinner（高度和寬度屬性可能不是必要的）：

#spinner { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 99999; // puts your div on top on others 
}

來源

2012-05-11 07:13:06 pXel

只是檢查我的更新 – TRR

只是添加CSS

#spinner 
    { 
     background: url("image") repeat scroll #AAA; 
     opacity: 0.3; 
     height: 100%; 
     left: 0; 
     position: absolute; 
     top: 0; 
     width: 100%; 
     z-index:2000; 
    }

希望這個作品

來源

2012-05-11 07:13:21

希望你能得到我的答案.. –

我的問題是不與加載圖像的位置..我希望它顯示爲覆蓋或類似的東西，使後面的頁面將變灰，用戶可以' t選擇任何東西 – TRR

是的..我明白你的情況。通過給div的id與微調作爲位置：絕對和背景屬性這個div將盲目HTML中的所有內容，並顯示微調。 –

顯示加載微調，並防止在頁面上的任何其他行動

回答

相關問題