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

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

提前致谢

Answer 1

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

HEAD科

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（截断以说明必要的部分）

 
 // Fields omitted for brevity  
 
 
 
PROCESSING. PLEASE WAIT... 
  

最终结果看起来像这样。

防止用户干扰该过程（当然，除非他们点击停止或退出浏览器（显然））。 非常好用，它非常干净，适用于Chrome，IE，Firefox和Safari，使用Google Code存储库中包含的最新jQuery和jQuery UI库。

Answer 2

你可以使用jquery uimodal dialog并隐藏关闭按钮

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

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

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

。 我不知道如何检查post是否在PHP中完成，但是如果有办法可以在那里完成。

Answer 3

我使用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");