显示加载进度模式不隐藏

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

首先，live is deprecated 使用 'on' 代替。

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

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

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

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

我认为在这里展示如何执行此操作的任何代码示例没有什么价值，因为您似乎没有尝试理解您从互联网上获取的代码。我相信这个答案足以让你找到正确的谷歌搜索