Javascript 提交后弹出。显示加载窗口或请稍候
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8275723/
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
Popup After Submit. Display a loading window or please wait
提问by Tahoe Cale
Here's my script:
这是我的脚本：
<form action='' method='' onsubmit='refreshpage();'>
<input name='refresh' type="image" SRC="images/Next-Page-Button.gif" HEIGHT="60" WIDTH="173" BORDER="0" value='Refresh'>
</form>
I want it when the user clicks the "next page" button a loading or please wait will pop up because it takes over 30 sec for the next page and I want the members to know the site is working, but also make the popup go away after the page is loaded.
我希望当用户单击“下一页”按钮时会弹出加载或请稍候，因为下一页需要 30 秒以上，我希望成员知道该站点正在运行，但也要使弹出窗口消失页面加载后。
Also if you want to see the button in action my site is www.socialmedianetworkexchange.comand it's when you click the "earn facebook likes" button.
此外，如果您想查看按钮的实际效果，我的网站是www.socialmedianetworkexchange.com，并且当您单击“获得 facebook 喜欢”按钮时。
回答by Nathan
You could show an element over the page when they click it, and then it will go away by itself upon navigating to the other page.
您可以在他们单击时在页面上显示一个元素，然后在导航到另一个页面时它会自行消失。
JavaScript:
JavaScript：
function showLoading() {
document.getElementById('loadingmsg').style.display = 'block';
document.getElementById('loadingover').style.display = 'block';
}
HTML/CSS:
HTML/CSS：
<style type="text/css">
#loadingmsg {
color: black;
background: #fff;
padding: 10px;
position: fixed;
top: 50%;
left: 50%;
z-index: 100;
margin-right: -25%;
margin-bottom: -25%;
}
#loadingover {
background: black;
z-index: 99;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
</style>
<div id='loadingmsg' style='display: none;'>Redirecting, please wait...</div>
<div id='loadingover' style='display: none;'></div>
<form action='' method='post' onsubmit='refreshpage();showLoading();'>
<input name='refresh' type="image" src="images/Next-Page-Button.gif" height="60" width="173" border="0" value='Refresh'>
</form>
You can change the loading message to whatever you wish for it to say, of course.
当然，您可以将加载消息更改为您希望它说的任何内容。
Edit:
编辑：
Just add the onclickevent to the <li>like:
只需将onclick事件添加到<li>类似：
<li onclick="showLoading()">
<a href="facebook.php">
<img src="images/logos/facebooklikeicon.png" height="25" border="0" /> Earn Coins Facebook
</a>
</li>
Make sure you have the other HTML, CSS and JavaScript above this for the function to work.
确保你有其他 HTML、CSS 和 JavaScript，以便函数工作。
