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

Question

这是我的剧本：

<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喜欢”的按钮。

Answer 1

您可以在页面上单击该元素时将其显示，然后导航到另一页面时该元素将自动消失。

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>

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

---

编辑：

只需将onclick事件添加到<li>，例如：

<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，该功能才能正常工作。