jquery - 在处理 HTML 表单时显示 jQuery 对话框 onSubmit

Question

我有一个 HTML 表单，允许用户添加最多 X MB 的附件。由于用户的连接速度各不相同，我想显示一个对话框，其中显示“您的请求正在处理。请勿离开此页面。成功提交表单后，此对话框将关闭”。不是逐字逐句，但类似。该表单会发送给自身并使用 PHP 进行处理。我不是在寻找进度条或任何东西。只是一个友好的提醒。我一直在查看 jQuery UI 文档，但示例显示了需要用户干预才能继续的确认。我只想要一个在处理过程中的占位符。任何此或链接表示赞赏。

提前致谢

Answer 1

因此，经过一些修补和数小时的搜索后，我能够拼凑出一个不需要任何 Ajax 的工作解决方案。这是:

头部部分

<script type="text/javascript">
    $(document).ready(function (){
        $("#loading-div-background").css({ opacity: 1.0 });
    });

    function ShowProgressAnimation(){
        $("#loading-div-background").show();
    }
</script>

CSS

#loading-div-background{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
}

#loading-div{
    width: 300px;
    height: 150px;
    background-color: #fff;
    border: 5px solid #1468b3;
    text-align: center;
    color: #202020;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    behavior: url("/css/pie/PIE.htc"); /* HANDLES IE */
}

HTML(被截断以说明必要的部分)

<form id="frm_send" name="frm_send" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
// Fields omitted for brevity
<input type="submit" id="submit" name="submit" class="button" onclick="ShowProgressAnimation();" value="Send">
</form>
<div id="loading-div-background">
  <div id="loading-div" class="ui-corner-all">
    <img style="height:32px;width:32px;margin:30px;" src="/images/please_wait.gif" alt="Loading.."/><br>PROCESSING. PLEASE WAIT...
  </div>
</div>

最终结果如下所示。

防止用户干扰该过程(当然，除非他们单击停止或退出浏览器(显然))。使用 Google 代码存储库中包含的最新 jQuery 和 jQuery UI 库，工作非常好、干净，并且可以在 Chrome、IE、Firefox 和 Safari 上工作。