Как во время отправки ajax запроса сделать всплывающее на 5 сек модальное окно?

14 июня 2021, 15:00

Есть типичная форма отправки сообщения, которая отправляет данные на php страницу c помощью ajax с которой идет перенаправление обратно, и при этом всплывает модальное окно с благодарностью.

Как сделать так, чтобы запрос сработал (возврат на страницу за это время произошел), а модальное окно при этом повисело 5 секунд и потом исчезло, а не как сейчас появляется только на мгновение.

Важно! Запрос за это время должен сработать, сделать настройку в ajax на 5 сек не подойдет, но и setTimeout меня в данном случае не выручает.

$('#myForm').on('submit', function(e) { 
  $('#box_modal').css('display', 'block'); 
  $('#box_modal').animate({ 
    'opacity': 1 
  }, 500); 
  $.ajax({ 
    type: "POST", 
    url: $(this).attr('action'), 
    data: $(this).serialize(), 
    success: function() { 
      setTimeout(function() { 
        $('#box_modal').css('opacity', 0); 
        $('#box_modal').css('display', 'none'); 
      }, 5000); 
    } 
  }); 
});

#box_modal { 
  background-color: blue; 
  color: red; 
  font-size: 18px; 
  width: 100px; 
  height: 50px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form id="myForm" method="post" action="mail.php"> 
  <input type="text" value="Hello there"> 
  <input type="submit" value="Go"> 
</form> 
 
<div id="box_modal" style="display:none;"> 
  Thank you! 
</div>