Question

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

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

更新：

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

Answer 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;
    }

希望这有效

Answer 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. 
}

Answer 3

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

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

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

3 个答案: