javascript - MVC JQuery Ajax忙指示符覆盖在窗体上

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>

这样做是将微调器DIV扩展为涵盖所有#RegisterForm。我还添加了不透明度，因此您可以看到它是如何叠加的。 JavaScript看起来不错，应该可以解决问题。