Javascript MVC JQuery Ajax忙指示器覆盖在表单上

我创建了一个使用jQueryAjax提交的简单表单，效果非常好。我试图实现的是，在整个表单上显示一个繁忙的指示器“加载程序图像”，作为覆盖。我已经看过很多例子，但大多数都与显示和隐藏一个包含图像的简单div有关，它不作为表单上的覆盖。到目前为止，我所取得的成就是在css的帮助下，在屏幕中央显示加载指示器。下面是我的div和css的代码

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

---

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

有点奇怪的是，你有loader.gif和spinner.gif。。。我猜你故意使用这两种方法是有原因的。我会考虑的。我假设斯宾纳是一个孩子。如果是这种情况，您可以选择以下样式：

<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>

#注册执行{
显示：块；
位置：相对位置；
}
#纺纱机{
显示：无；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
文本对齐：居中；
背景：url（spinner.gif）无重复中心#fff；
填充：10px；
字体：标准16px塔荷马，日内瓦，无衬线；
边框：1px实心#666；
z指数：2；
不透明度：0.75；
}

---

这样做的目的是延伸微调器DIV以覆盖所有的#RegisterForm。我还添加了不透明度，以便您可以看到它是如何覆盖的。JavaScript看起来很好，应该可以做到这一点。

我找到了另一个解决方案，它对我来说足够简单，而且是开箱即用的。解决方案是使用jQuery.BlockUI。它不仅可以阻止整个页面，还可以阻止页面上的任何元素。默认情况下呈现css，但如果需要，可以更改css。我已经添加了来自NuGet的包。添加了参考文件并更新了我的Ajax调用，如下所示

$(function () {
    $('#RegisterForm').submit(function () {
        if ($(this).valid()) {
            $("#RegisterForm").block({
                message: '<img src="@Url.Content("~/images/loader.gif")" alt="Please wait...">',
                css: { width: '4%', border: '0px solid #FFFFFF', cursor: 'wait', backgroundColor: '#F2F2F4' },
                overlayCSS: { backgroundColor: '#FFFFFF', opacity: 0.5, cursor: 'wait' }
            });
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $("#RegisterForm").unblock();
                    $("div#result").html(result);
                }
            });
        }
        return false;
    });
});

$（函数（）{
$（'#RegisterForm'）。提交（函数（）{
if（$（this）.valid（））{
$（“#RegisterForm”）.block({
消息：“”，
css:{width:'4%'，border:'0px solid#FFFFFF'，cursor:'wait'，backgroundColor:'f2f4'}，
覆盖层：{backgroundColor:'#FFFFFF'，不透明度：0.5，光标：'wait'}
});
$.ajax({
url:this.action，
类型：this.method，
数据：$（this）.serialize（），
成功：功能（结果）{
$（“#注册表执行”）.unblock（）；
$（“div#result”）.html（result）；
}
});
}
返回false；
});
});

---

它就像一个符咒。我可以改变背景和加载图像也。因此，如果有人正在寻找相同的解决方案，这可能会有所帮助。

感谢您的快速回复并帮助我解决问题。之前使用了spinner.gif，我下载了新的加载程序图像，但忘记从css文件中删除旧图像。不管怎样，它工作得很好。幸运的是，我已经从一个插件中找到了另一个解决方案，我将使用它，因为它很容易使用。

<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>

$(function () {
    $('#RegisterForm').submit(function () {
        if ($(this).valid()) {
            $("#RegisterForm").block({
                message: '<img src="@Url.Content("~/images/loader.gif")" alt="Please wait...">',
                css: { width: '4%', border: '0px solid #FFFFFF', cursor: 'wait', backgroundColor: '#F2F2F4' },
                overlayCSS: { backgroundColor: '#FFFFFF', opacity: 0.5, cursor: 'wait' }
            });
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $("#RegisterForm").unblock();
                    $("div#result").html(result);
                }
            });
        }
        return false;
    });
});