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

Question

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

<div id="media_delete_confirmation" class="modal fade"> 
    <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">Confirmation</h4> 
     </div> 

     <form id="modal-form"> 
     <div class="modal-body"> 
      <input id="media_action" value="deleteMediaAction" type="hidden"/> 
      <p>Do you want to save changes you made to document before closing?</p> 
      <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-primary" data-dismiss="modal">Keep</button> 
      <button type="button" class="btn btn-default" 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"); 
    } 
    }); 
}); 

Answer 1

Нет необходимости скрывать модель с помощью JavaScript, вы можете просто использовать данные, отклонять = «модальный» в атрибуте кнопки тега следующим ,

<div class="modal-footer"> 
    <button type="button" class="btn btn-primary" data-dismiss="modal">Keep</button> 
    <button type="button" class="btn btn-default" id="modal_delete" data-dismiss="modal">Delete</button> 
</div> 

Answer 2

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 
    }); 
} 

Version 2

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

Answer 3

Я была такая же проблема, и был в состоянии получить модальное диалоговое окно, чтобы закрыть этот путь:

<div id="approveDialog" class="modal approveDialog hide"> 
    <!-- various form elements --> 
    <div class="modal-footer pull-center"> 
      <a href="#" data-dismiss="modal" aria-hidden="true" class="btn">Back to Listings</a>  
      <button id="submitApprove" class="btn btn-success">Shop</button> 
    </div> 
</div> 


$('button#submitApprove').on("click", function(event) { 
    // submit form via ajax, then 

    event.preventDefault(); 
    $('#approveDialog').modal('hide'); 
}); 

Answer 4

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

В функции успеха, я добавил этот код с помощью JQuery:

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

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

EDIT: Это не правда работает на IE и Chrome, работает только на Mozilla: с

Answer 5

Просто попробуйте на <script> до конца вашего тела написания этого

$('#media_delete_confirmation').submit(function() { 
     $('#media_delete_confirmation').modal('hide'); 
     });