javascript - MVC JQuery Ajax Busy Indicator 覆盖在表单上

Question

我创建了一个简单的表单，它使用 JQuery Ajax 提交并且运行良好。我想要实现的是，一个繁忙的指示器“加载器图像”作为叠加层显示在整个表单上。我见过很多例子，但其中大部分都与显示和隐藏包含图像的简单 div 有关，并且它不作为表单的叠加层。到目前为止，我所取得的成就只是在 css 的帮助下在屏幕中央显示加载指示器。下面是我的 div 和它的 css 的代码。

<div id="spinner">
    <img src="@Url.Content("~/images/loader.gif")" alt="Please wait...">
</div>

这是CSS，

<style>
  div#spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    background: url(spinner.gif) no-repeat center #fff;
    text-align: center;
    padding: 10px;
    font: normal 16px Tahoma, Geneva, sans-serif;
    border: 1px solid #666;
    margin-left: -50px;
    margin-top: -50px;
    z-index: 2;
    overflow: auto;
  }
</style>

Ajax 调用在这种情况下可能并不重要，但我会以备不时之需，

$(function () {
    $('#RegisterForm').submit(function () {
        if ($(this).valid()) {
            $("div#spinner").fadeIn("fast");
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $("div#spinner").fadeOut("fast");
                    $("div#result").html(result);
                }
            });
        }
        return false;
    });
});

现在，正如我在这段代码中所说，加载器图像显示在屏幕中央，但它没有覆盖。但我希望加载程序图像仅覆盖在表单上。但它应该根据运行时的表单大小自行调整，因为我没有指定任何高度。这是可以实现的吗？如果是那么怎么办？

Answer 1

有点奇怪的是您有 loader.gif 和 spinner.gif...我猜您是出于某种原因故意使用两者。我会考虑到这一点。我假设#spinner 是#RegisterForm 的子项。如果是这种情况，您可以使用如下样式:

<style>
    #RegisterForm {
        display: block;
        position: relative;
    }
    #spinner {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        background: url(spinner.gif) no-repeat center #fff;
        padding: 10px;
        font: normal 16px Tahoma, Geneva, sans-serif;
        border: 1px solid #666;
        z-index: 2;
        opacity: 0.75;
    }
</style>

它所做的是拉伸(stretch)微调器 DIV 以覆盖所有 #RegisterForm。我还添加了不透明度，以便您可以看到它是如何覆盖的。 JavaScript 看起来不错，应该可以解决问题。