javascript – 提交后弹出.显示加载窗口或请稍候

2019-07-21 18:32:38 阅读：307 来源： 互联网

标签：javascript web popupwindow pleasewait

这是我的脚本：

<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喜欢”按钮时.

解决方法:

您可以在单击它时在页面上显示一个元素,然后它将自行消失(一旦进入新页面).这是我刚刚制作的代码：

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="showLoader();">
<a href="facebook.php">
<img src="images/logos/facebooklikeicon.png" height="25" border="0" /> Earn Coins Facebook 
</a>
</li>

确保在此之上有其他HTML,CSS和JavaScript,以使该功能正常工作.

如果您有任何不理解的部分,请告诉我.

标签：javascript,web,popupwindow,pleasewait
来源： https://codeday.me/bug/20190721/1494763.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 提交后弹出.显示加载窗口或请稍候