0

Я поместил модальное окно в переменную 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);

1 ответ 1

3

Господи. что это за ужас. кто же так делает.

Помещаешь html в html, в конец страницы. Модалка будет скрыта. потом при помощи jQ находишь её - $('div#FerstModal') и $('div#Senks').

Запихиваешь их в переменные. Потом оперируешь переменными.

Как я вижу это bootstrap модалки. У него есть свои метода для открытия и закрытия модалок - Документация

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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