显示加载微调器并防止页面上的任何其他操作答案

【问题标题】：display loading spinner and prevent from any other action on the page显示加载微调器并防止页面上的任何其他操作
【发布时间】：2012-05-11 18:26:21
【问题描述】：

我有一个 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>

我的问题是，当用户选择一行并显示加载符号时，他可以点击另一行。一旦加载微调器可见，我想阻止用户单击或选择页面上的任何内容。任何帮助

更新：

我的问题不在于加载图像的位置。我希望它显示为覆盖或类似的东西，以便后面的页面将变灰并且用户无法选择任何内容

【问题讨论】：

除了人们提供的 CSS 解决方案之外，也许您可以从表行中取消绑定相关事件。甚至暂时禁用它们。

标签： jquery asp.net-mvc-3 loading

【解决方案1】：

只需添加 css

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

希望这可行

【讨论】：

我的问题不在于加载图像的位置。我希望它显示为覆盖或类似的东西，这样后面的页面就会变灰并且用户无法选择任何内容
是的.. 我了解您的情况。通过将 id 微调器作为 position:absolute 并具有背景属性的 div 的 css 将隐藏 html 中的所有内容并显示微调器..
在我的情况下不起作用:(我仍然可以选择表格单元格

【解决方案2】：

您可以定义一个 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.        
  }

更新：实际上，你甚至不需要设置一个新的脚本变量，你可以直接test the state你的微调器：

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

【讨论】：

我想在一种叠加层上显示加载符号，而不是添加标志。
@rutwikreddy 正如该线程中提到的，您可以将 css 应用于您的微调器 div，这会将其变成这样的叠加层。这里还有一个 jQuery“阻止用户交互”插件，可能是你需要的：malsup.com/jquery/block

【解决方案3】：

尝试将 css 样式添加到您的 #spinner（高度和宽度属性可能不是必需的）：

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

【讨论】：