Всплывающее окно после отправки. Покажите окно загрузки или подождите - PullRequest
Новая
       29

Всплывающее окно после отправки. Покажите окно загрузки или подождите

3 голосов
/ 26 ноября 2011

Вот мой сценарий: 

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

1 Ответ

10 голосов
/ 26 ноября 2011

Вы можете показать элемент поверх страницы, когда они щелкают по нему, и тогда он исчезнет сам по себе (как только он перейдет на новую страницу).Вот код, который я только что сделал:

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 выше для этой функциина работу.

Пожалуйста, дайте мне знать, если есть какие-то части, которые вы не понимаете.

...