1

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

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

更新：

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

4

3 回答 3

2

只需添加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-11T07:13:21.357 回答
1

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

#spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99999; // puts your div on top on others
}
于 2012-05-11T07:13:06.600 回答
1

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

更新：实际上，您甚至不需要设置新的脚本变量，您可以直接测试微调器的状态：

if ($('#spinner').is(':hidden')) { 
  etc. 
}
于 2012-05-11T07:19:39.253 回答