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

标签 javascript jquery html css asp.net-mvc

我创建了一个使用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看起来不错,应该可以解决问题。

关于javascript - MVC JQuery Ajax忙指示符覆盖在窗体上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30406024/

相关文章:

javascript - Backbone 虹吸管嵌套属性

javascript - 如何以编程方式模拟输入内容可编辑的 HTML 元素?

javascript - 我想在单击关闭按钮Angular 6后隐藏div

javascript - 如何使用 jQuery 创建带有文本的 div?

javascript - 即使我打开另一个标签,如何保持Google Chrome扩展程序运行?

JavaScript函数返回用户 session 的负数秒数?

javascript - 将 jQuery slideToggle() 添加到 anchor 链接上的 onclicked 事件

html - CSS "width: auto"不适用于 <div>

JavaScript Img 在提示对话框期间暂停?

javascript - 使用 React 从另一个组件添加到组件