MVC JQuery Ajax繁忙指示器叠加在表单上

MVC JQuery Ajax Busy Indicator overlay on Form

本文关键字：叠加 表单 指示器 JQuery Ajax MVC      更新时间：2023-09-26

我创建了一个使用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;
    });
});

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

有点奇怪的是，你有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看起来很好，应该可以完成这个任务。

我已经找到了另一个解决方案，这对我来说足够简单，并且开箱即用。解决方案是使用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;
    });
});

效果很好。我也可以改变背景和加载图像。因此，如果有人正在寻找相同的解决方案，那么这可能会有所帮助。

相关文章：