javascript - 显示加载进度模式不隐藏

Question

在 SQL 选择完成执行后，我需要进度加载消息。我有一个来自互联网的代码，但加载完成后模式不会隐藏。我需要这样的概念。是否有任何代码可以帮助我在选择查询后取得进度加载消息。我的问题是当我在 SQL 中选择太多数据时有一个急切的加载，这就是为什么我需要进度消息显示选择数据的过程正在从数据库中进行/呈现。

这是我现在正在尝试做的来自互联网的代码，但是存在一个错误，模态在加载完成后不会隐藏。

       <style type="text/css">
    .modal
{
    position: fixed;
    top: 0;
    left: 0;
    background-color:Black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}
.loading
{
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid #67CFF5;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left });
        }, 200);
    }
    $('form').live("submit", function () {
        ShowProgress();
    });

</script>

Answer 1

首先，直播 is deprecated请改用“on”。

接下来，在您的代码中发生的事情是，您将模态框附加到正文并使用 jquery 的 show 在提交表单时显示它。

您会注意到没有任何代码可以删除/隐藏您的模式。您有多种选择可以做到这一点。您将需要在删除或隐藏模态时获取模态，或者在 ShowProgress 函数内将其保存在变量中:

• 从文档中删除您的模式。
• 使用 jquery 的 hide() 隐藏您的模式。
• 添加或删除 CSS 类或样式。

现在，可能会发生第三个问题:您不知道表单何时完成提交。好吧……除非您用其他代码更改了其他内容，否则永远不会。默认情况下，表单提交会向其目的地发送发布请求。所以通常情况下，用户将被重定向，并且隐藏模态的需要是不存在的。

我认为在此处展示有关如何执行此操作的任何代码示例没有值(value)，因为您似乎并未尝试理解从 Internet 获取的代码。我相信这个答案足以将您指向正确的谷歌搜索