Я поместил модальное окно в переменную JS, пытаюсь его отобразить. Все бы хорошо, но после отправки данных с помощью аякса должно выпасть модальное окно. А теперь проблемка.
Если без данных отправлять, то почти отрабатывает модальные окна, только не убирается фон. И не отрабатывает remove()
.
Если с данными, то все проходит быстро и без всяких там затуханий.
(function ($, undefined) {
$(function () {
var phonemodal = `<div id="FerstModal" role="dialog" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Заголовок модального окна -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Оставьте ваши данные и вам перезвонят.</h4>
</div>
<!-- Основное содержимое модального окна -->
<div class="modal-body">
<form id="formPhone" method="post" class="formPhone form-horizontal" role="form">
<div class="form-group">
<label for="inputName" class="col-xs-4 control-label">Как вас зовут?</label>
<div class="col-xs-7">
<input type="text" name="name" class="form-control" id="inputName" placeholder="Ваше имя?" required/>
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-xs-4 control-label">Ваш телефон</label>
<div class="col-xs-7">
<input type="text" name="phone" class="form-control" id="inputPhone" placeholder="Введите ваш номер телефона"
required/>
</div>
</div>
<!-- Футер модального окна -->
<div class="modal-footer">
<button id="send" type="submit" data-target="#Senks" data-toggle="modal" class="btn btn-primary " > Оставить заявку</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="Senks" role="dialog" class="modal" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Основное содержимое модального окна -->
<div class="modal-body bysenks">
<h5>Спасибо за обращение вам перезвонят.</h5>
</div>
</div>
</div>
</div>`;
function presend() {
if ($("#inputName").val() !== '' && $("#inputPhone").val() !== '') {
return true;
}
else {
return false;
}
}
$('button.Phone').click(function () {
$(phonemodal).appendTo('body');
$('#send').click(
function () {
$.ajax({
url: "ajax.php",
data: {name: $("#inputName").val(), phone: $("#inputPhone").val()},
type: 'POST',
cache: false,
// beforesend: (presend()),
});
$('#FerstModal').fadeOut(3000);
$('#Senks').fadeIn(4000).fadeOut(6000);
$(phonemodal).remove();
});
});
});
})(jQuery);