5

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

提前致谢

4

3 回答 3

12

因此，经过一些修补和数小时的搜索，我能够拼凑出一个不需要任何 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>

最终结果看起来像这样。

jQuery onSubmit 表单处理对话框

防止用户干扰进程（当然，除非他们单击停止或退出浏览器（显然））。工作得非常好，它很干净，并且可以使用谷歌代码存储库中包含的最新 jQuery 和 jQuery UI 库在 Chrome、IE、Firefox 和 Safari 上运行。

于 2013-05-20T15:57:33.043 回答
0

您可以使用 jquery ui 模态对话框并隐藏关闭按钮

http://api.jqueryui.com/dialog/#entry-longdesc

您也可以使用 ajax 提交表单，然后您可以在请求开始之前打开对话框，并在成功函数中使用关闭对话框

$("#myDialog").dialog("close");

. 我不确定如何检查帖子是否在 PHP 中完成，但如果有办法做到这一点，你可以在那里完成。

于 2013-05-18T17:50:42.060 回答
0

我使用 pnotify。这是一个非常轻量级和超级简单的 jQuery 插件。它显示简单的非侵入性对话框。在这里查看。

更新

这是我如何使用 pNotify 处理成功/失败通知用户的一个快速小示例。我将 pNotify 更新包含在它们自己的函数中，因此我不必对每个请求重复代码，但我认为这应该演示如何将其用于用户通知。

notify = $.pnotify({
    title: 'Working',
    text: 'Updating entry, please wait...',
    type: 'info',
    hide: false
});

$.post('ajax.php', meta, function (data) {
    if (data && data.status === 1) {
        notify.pnotify({
            title: 'Success',
            text: 'System successfully updated.',
            type: 'success',
            delay: 1500,
            hide: true
        });
    } else {
        notify.pnotify({
            title: 'Error',
            text: 'There was an error updating the system.',
            type: 'error',
            delay: 4000,
            hide: true
        });

    }

}, "json");
于 2013-05-18T19:26:44.467 回答