使用 Jquery 显示模态“请稍候”对话框消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4015159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Jquery to display a modal "please wait" dialog box message
提问by ziggy
Is it possible to block a page when a user clicks on a link and only enable it once the response has come back from the server. I had a problem recently where a link was clicked on a page several times resulting in two simultaneous changes.
是否可以在用户单击链接时阻止页面，并且仅在服务器返回响应后才启用它。我最近遇到了一个问题，在页面上多次单击链接导致两个同时更改。
The problem was that the page was allowing multiple submit. I have already resolved this on the server side using Struts saveToken() and isValidToken() to prevent this to happen again. This will ensure that if multiple submits are recieved the second one is not processed.
问题是该页面允许多次提交。我已经在服务器端使用 Struts saveToken() 和 isValidToken() 解决了这个问题，以防止这种情况再次发生。这将确保如果收到多个提交，则不会处理第二个提交。
Now the problem i am having is if the user clicks on the submit link twice, the first request is valid but the second is not. The user is redirected to an error page not realising that the first request did go through.
现在我遇到的问题是，如果用户单击提交链接两次，第一个请求有效，但第二个请求无效。用户被重定向到一个错误页面，但没有意识到第一个请求确实通过了。
I think the solution is to block/disable the link when it is clicked. I know you can use javascript to disable the link but i would like to use one of the AJAXy modal dialog boxes that i've seen on several sites. Basicly when you click on the link, a pop dialog shows up with a message "Please wait..". The background is faded out and the user cannot do anything until the response has come back from the server. Most of the examples that i see seem to be Ajax based. My page does not use Ajax.
我认为解决方案是在单击链接时阻止/禁用该链接。我知道您可以使用 javascript 来禁用链接，但我想使用我在多个站点上看到的 AJAXy 模式对话框之一。基本上，当您单击链接时，会出现一个弹出对话框，其中包含一条消息“请稍候...”。背景淡出，用户无法做任何事情，直到响应从服务器返回。我看到的大多数示例似乎都是基于 Ajax 的。我的页面不使用 Ajax。
What is the easiest way to achieve this modal dialog box? I have been looking around and there are several plugins available for JQuery but given that i am new to it i dont quite understand it. Can someone show me an example of how to do this using Jquery?
实现此模态对话框的最简单方法是什么？我一直在环顾四周，有几个可用于 JQuery 的插件，但鉴于我是新手，我不太了解它。有人可以向我展示如何使用 Jquery 执行此操作的示例吗？
Thanks
谢谢
EDIT
编辑
Take this for example,
以这个为例，
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
I would like these events to be triggered when i click on a link. The link itself points to another javascript function. i.e.
我希望在单击链接时触发这些事件。链接本身指向另一个 javascript 函数。IE
<a href="javascript:submitform();">confirm</a>
How can i call the jquery bits inside of the submitform() javascript function? Preferabley after the submitform() has completed.
我如何调用 submitform() javascript 函数中的 jquery 位？最好在 submitform() 完成后。
回答by Sam
Have a look at jQuery.dialog (website), it allows you to either show in-page divs as modals or alternatively even get your content from another page.
看看 jQuery.dialog（网站），它允许您将页面内 div 显示为模态，或者甚至从另一个页面获取您的内容。
<div id="progress" class="dialogContent" style="text-align: left; display: none;">
<img src="../../global/style/default/images/ajax-loader.gif" style="margin-right: 5px;" />
<asp:literal id="literalPleaseWait" runat="server" text="Please wait..." />
</div>
and then call the function below to show the dialog
然后调用下面的函数来显示对话框
function ShowProgressAnimation() {
var pleaseWaitDialog = $("#progress").dialog(
{
resizable: false,
height: 'auto',
width: 150,
modal: true,
closeText: '',
bgiframe: true,
closeOnEscape: false,
open: function(type, data) {
$(this).parent().appendTo($("form:first"));
$('body').css('overflow', 'auto'); //IE scrollbar fix for long checklist templates
}
});
}
回答by David M?rtensson
You could overlay a absolutly positioned div layer with transparency that captures any mouseclicks preventing any objects in the page from reacting.
您可以覆盖一个绝对定位的具有透明度的 div 层，以捕获任何鼠标点击，从而防止页面中的任何对象做出反应。
Then an another div ontop of that to display a message.
然后在其上的另一个 div 显示一条消息。
There are several js libraries to do such things, many which builds on jQuery, so look on jquery modal popup.
有几个 js 库可以做这样的事情，很多都建立在 jQuery 上，所以看看 jquery 模态弹出窗口。
回答by Suhumar
Inside you submitform() after you do the form.submit() call the centerPopup() and the loadPopup() directly to show the popup window
在执行 form.submit() 之后，在 submitform() 内部直接调用 centerPopup() 和 loadPopup() 以显示弹出窗口
