0

Мне нужно на js написать такое условие, что после того как появится загрузка(после клика на кнопку) и она отыграет определенное время(секунды) сразу же появится зеленый квадрат, но так получается что у меня не выходит поставить условие на setTimeout, и этот зеленый квадрат отсчитывает эти 12 секунд сразу же после загрузки страницы, а мне нужно что бы отсчитывал после появления загрузки. Подскажите как это сделать?

$(document).ready(function(){
        $('#openBtn').click(function(){
          $('#exampleModal').show(1000);
 });
 
 setTimeout(function(){
  $('#exampleModal').hide();
if($('#exampleModal').hide()){
   $('#blockGreen').show()
}
 
}, 12000);
   });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='openBtn'>Open</button>

<div class="modal" id="exampleModal" style='display:none'>
    <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" > Подождите </h5>
                   
          </div>
          <div class="modal-body"> 
              <form >
                  <div class="form-group">
                      <img src=" https://minskhalfmarathon.by/volunteers/volunteers/preloader.gif  " style="width: 100px; height:  100px;" align="justify-content-around" alt="">
                        </div>
              </form>
          </div>
    </div>
</div>

<div style='display:none' id='blockGreen'>
<div style='width:80px;height:80px;background:green'></div>
</div>

1
  • @Grundy, спасибо, то случайно
    – maRIA M.
    19 фев 2019 в 8:26

1 ответ 1

1

Переместите код с timeout внутрь обработчика клика

$(document).ready(function() {
  $('#openBtn').click(function() {
    $('#exampleModal').show(1000);
    setTimeout(function() {
      $('#exampleModal').hide();
      if ($('#exampleModal').hide()) {
        $('#blockGreen').show()
      }
    }, 12000);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='openBtn'>Open</button>

<div class="modal" id="exampleModal" style='display:none'>
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title"> Подождите </h5>

    </div>
    <div class="modal-body">
      <form>
        <div class="form-group">
          <img src=" https://minskhalfmarathon.by/volunteers/volunteers/preloader.gif  " style="width: 100px; height:  100px;" align="justify-content-around" alt="">
        </div>
      </form>
    </div>
  </div>
</div>

<div style='display:none' id='blockGreen'>
  <div style='width:80px;height:80px;background:green'></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.