Как закрыть Bootstrap 3 модально программно в случае успеха AJAX?

Ответ 1

попробуйте добавить этот атрибут с вашим модальным div aria-hidden="true"

например:

<div aria-hidden="true" class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Вот мой рабочий пример

<div class="modal fade" id="copy_course_modal" tabindex="-1" role="dialog" aria-labelledby="copycourse" aria-hidden="true">
    <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="purchaseLabel">Copy Chapter</h4>
                </div>
                <div class="modal-body">
                Modal body content here
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="saveCopiedCourse()">Copy Course</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
</div> 

и при успешном выполнении.

$("#copy_course_modal").modal('hide');

Ответ 2

У меня такая же точная проблема, и единственный способ найти работу - это индивидуальное удаление частей модала. Просто поместите эту функцию в js js и сделайте событие onclick на своей кнопке в html или js. Надеюсь, я помог.

function hideModal(){
  $(".modal").removeClass("in");
  $(".modal-backdrop").remove();
  $('body').removeClass('modal-open');
  $('body').css('padding-right', '');
  $(".modal").hide();
}

Ответ 3

Try:

$(".modal.in").modal("hide");

Это скроет текущий активный режим.

Ответ 4

Иди в этот вопрос сам в подобной ситуации.

Кажется, это связано с асинхронным характером анимации javascript + bootstrap.

Это грязный грязный хак, но завершение вызова "скрыть" в тайм-аут заставил его работать для меня:

setTimeout( function(){$("#myModal").modal('hide')}, 300 );

При использовании этого "решения" для проблемы вам может потребоваться настроить значение таймаута. Кажется, что анимация Bootstrap занимает около 125-200 мс, поэтому 300 обеспечивает хороший буфер безопасности.

Ответ 5

$('#deleteContactModal').modal('hide')

Найти эту ссылку

https://getbootstrap.com/docs/3.3/javascript/#modal-hide

Здесь подробно описывается https://getbootstrap.com/docs/3.3/javascript/#modal-hide относительно окна модели

Ответ 6

Простая программная кнопка "Закрыть" диалогового окна.

$( "Кнопка [данные отклонять = \" модальный \ "]" ) нажмите кнопку();.

Это автоматически закроет диалог.

Ответ 7

Это всего лишь проблема синхронизации. Анимация Fade требует времени, а javascript не может ее закрыть. просто отмените анимацию затухания, и она работает правильно!

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

(Не использовать class= "modal fade", jus class= "modal" )

Ответ 8

Я попробовал несколько предлагаемых решений, и единственный, который работал у меня, был:

$( "modal.in." ) Модальный ( 'скрыть');.

Некоторые из них очистили модальный и задний фон, но затем он не перерисовывался последующие вызовы.

Ответ 9

Ни один из этих вариантов не работал для меня, кроме того, который сказал, не использовать модальное затухание. Однако я хотел использовать модальное затухание. Мой код делал ajax-вызов, чтобы сохранить изменения, а затем, в случае успеха, делал это:

$('#myModal').modal('hide');
doRefresh();

Проблема была в том, что doRefresh обновлял страницу в модальном режиме. Если я удалил doRefresh, это сработало. Итак, что я в итоге сделал это:

$('#myModal').modal('hide');
setTimeout(doRefresh, 500);

Ответ 10

Эта проблема будет решена путем скрытия отдельных элементов модальных. Такие как:

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

Ответ 11

Очистить задний план

$(".modal-backdrop").toggleClass("hide, show");

протестировано в BS4

Ответ 12

Я определяю мой модальный:

<div class="modal fade" aria-hidden="true" role="dialog" id="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button id="btnCloseModal" hidden type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>Waiting</strong>
            </div>
            <div class="modal-content">
                <div>
                    Please don't close your tab!
                </div>
                <div class="d-flex justify-content-center">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <strong>Loading...</strong>
            </div>
        </div>
    </div>
</div>

тогда я создаю функцию:

  var StopLoadingAnimation = function () {
$('#modal').on('show.bs.modal', function (e) {
    console.log("trigger show");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('shown.bs.modal', function (e) {
    console.log("trigger");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('hidden.bs.modal', function (e) {
    console.log("event");
    $(e.currentTarget).off('shown');
    $(e.currentTarget).off('show');
});
$("#btnCloseModal").trigger("click");
}

Моя идея заключается в том, что после успеха ajax вызовет функцию StopLoadingAnimation, которая будет вызывать событие щелчка по элементу btnCloseModal (как будто вы нажимаете кнопку btnCloseModal при закрытии модального окна)

Ответ 13

$.ajax({
    type: "POST",
    url: "admin/pc-item-insert.php",
    data: $(this).serialize(),
    success: function(data) {
        $("#showinfo").html(data);
        $(".modal").modal("hide");                  
    },
});