提交后弹出窗口。显示加载窗口或请稍等。

Question

提交后弹出窗口。显示加载窗口或请稍等。

3

这是我的脚本：

<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>

当用户单击“下一页”按钮时，我希望会弹出一个加载或等待的提示框，因为下一页需要超过30秒的时间加载，我希望会员知道网站正在工作中，但也希望在页面加载完成后关闭弹出窗口。

另外，如果您想查看此按钮的效果，请访问我的网站www.socialmedianetworkexchange.com，并单击“赚取Facebook赞”的按钮。

- Tahoe Cale

你为什么要刷新页面，而不是使用AJAX提交表单呢？ - Nathan

它需要将信息发送到数据库并获取更多网站的“喜欢”。 - Tahoe Cale

哦，好吧，AJAX也可以做同样的事情，但不需要刷新页面 ;) 它基本上是提交表单，但不会刷新页面。有关加载问题，请参见我的下面的答案。 :) - Nathan

请参阅 jQuery AJAX。如果您只想使用特定的方法类型，则使用 $.post 和 $.get 更容易，可以查看以下链接：jQuery $.get 或 jQuery $.post。 - Nathan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nathan · Accepted Answer

当用户点击某个元素时，您可以在页面上显示一个元素，然后在导航到其他页面时，该元素将自动消失。

JavaScript：

function showLoading() {
    document.getElementById('loadingmsg').style.display = 'block';
    document.getElementById('loadingover').style.display = 'block';
}

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>

当然，你可以将加载消息更改为任何你想要的内容。

编辑：

只需像这样向 <li> 添加 onclick 事件：

<li onclick="showLoading()">
   <a href="facebook.php">
      <img src="images/logos/facebooklikeicon.png" height="25" border="0" /> Earn Coins Facebook 
   </a>
</li>

确保在此函数上方有其他必需的 HTML、CSS 和 JavaScript，以使该函数正常工作。