Question

我创建了一个使用JQuery Ajax提交的简单表单并且运行良好。我想要实现的是繁忙的指示器“加载器图像”作为叠加显示在整个表单上。我已经看过很多例子，但是大多数都与show和hide相关，包含图像并且它不作为表单上的叠加。到目前为止我所取得的成就是在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的孩子。如果是这种情况，您可以将样式设置如下：

 System.Collections.Generic.List<ChartPrice> ChartPrices =
 new System.Collections.Generic.List<ChartPrice>();
 using (DatabaseDataContext db = new DatabaseDataContext())
    {
       ChartPrices = (from p1 in db.Prices
                     join p2 in db.Prices on p1.Date equals p2.Date
                     where p1.ProductId == -1 && p1.Id != p2.Id
                     orderby p1.Date descending
                     select new ChartPrice {
                     Price1 = p1.Amount.ToString(),
                     Price2 = p2.Amount.ToString(),
                     Date = (DateTime)p1.Date })
                     .Take(30).ToList();
    }

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

Answer 2

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

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

表单

2 个答案: