Есть типичная форма отправки сообщения, которая отправляет данные на 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>
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости