Закрыть bootstrap modal после отправки

Как я могу закрыть bootstrap modal после нажатия кнопки Delete? Здесь мой код:

<div id="media_delete_confirmation">
 <div>
 <div>
 <div>
 <button type="button" data-dismiss="modal" aria-hidden="true">×</button>
 <h4>Confirmation</h4>
 </div>
 <form id="modal-form">
 <div>
 
 <p>Do you want to save changes you made to document before closing?</p>
 <p><small>If you don't save, your changes will be lost.</small></p>
 </div>
 <div>
 <button type="button" data-dismiss="modal">Keep</button>
 <button type="button" id="modal_delete">Delete</button>
 </div>
 </form>
 </div>
 </div>
</div>

а здесь другая часть:

$("#modal_delete").click(function() {
 var id = $(".image-picker").val();
 var media_action = $("#media_action").val();
 $.ajax({
 type: 'POST',
 url: '?page=myMediaController&action=deleteMedia',
 data: {'media_id' : id},
 success: function(data) {
 $("#media_delete_confirmation").modal("hide");
 }
 });
});
5 ответов

У меня была такая же проблема, и мне удалось закрыть модальный диалог:

<div id="approveDialog">
 <!-- various form elements -->
 <div>
 <a href="#" data-dismiss="modal" aria-hidden="true">Back to Listings</a> 
 <button id="submitApprove">Shop</button>
 </div>
</div>
$('button#submitApprove').on("click", function(event) {
 // submit form via ajax, then
 event.preventDefault();
 $('#approveDialog').modal( 'hide' );
});


Не нужно скрывать модель с помощью javascript, вы можете просто использовать data-reject = "modal" в атрибуте тега кнопки следующим образом.

<div>
 <button type="button" data-dismiss="modal">Keep</button>
 <button type="button" id="modal_delete" data-dismiss="modal">Delete</button>
</div>


У меня была такая же проблема. Я попытался закрыть модальное окно после отправки. Единственный способ, которым я мог его решить, заключался в следующем.

В функции успеха я добавил этот код через jQuery:

success: function(respuesta){
 $('#btnGuardarCambios').attr("data-dismiss", "modal");

На кнопке "Сохранить изменения" я использовал метод attr. Если ajax успешно, я просто добавляю новый атрибут (data-dismiss) и устанавливаю его значение (модальное), иначе модальное значение не исчезнет.

EDIT: это не работает на IE и Chrome, работает только на Mozilla: c


Просто попробуйте


V3 вы можете попробовать

success: function(data) {
 // close modal
 $( '#media_delete_confirmation' ).modal( 'hide' ).data( 'bs.modal', null );
 // event after hidden
 $('#media_delete_confirmation').on('hidden', function(){
 $(this).data('modal', null); // destroys modal
 });
}

Версия 2

$( '#media_delete_confirmation' ).remove();
 $( '.modal-backdrop' ).remove(); // removes the overlay

licensed under cc by-sa 3.0 with attribution.