Modal將不會關閉Ajax成功

Question

我正在加載與ajax模式的內容。我有一個提交模式表單的按鈕，假設它在完成處理ajax提交時關閉模式，以便它可以更新頁面底部的表格。這不是結束後，我更新表，並呼籲$('modal-container').modal('hide');

該模式包含了與它分頁表的模態。在'loaded.bs.modal'事件中，我將所有將modal-pagination-link類變爲ajax鏈接的鏈接。我使用的分頁庫只允許傳遞鏈接的url和參數，這就是爲什麼我在加載後進行鏈接轉換的原因。當你點擊其中一個鏈接時，它會更新表格。爲了防止模式本身在您點擊鏈接後關閉，我打電話給$(this).removeData('bs.modal');。我發現這是$(this).removeData('bs.modal');是什麼阻止任何$('#modal-container').modal('hide');的工作。

我如何防止從模式關閉時，點擊一個鏈接的模式，仍然允許.modal('hide')仍然工作？我可以撥打什麼，而不是$(this).removeData('bs.modal')？

$(function() { 
// Initialize modal dialog 
// attach modal-container bootstrap attributes to links with .modal-link class. 
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog. 
$('body').on('click', '.modal-link', function (e) { 
    e.preventDefault(); 
    $(this).attr('data-target', '#modal-container'); 
    $(this).attr('data-toggle', 'modal'); 
    $('#modal-container').draggable(); 
    var updateTarget = $(this).attr('data-ajax-update'); 
    $('modal-update-target').attr('value', updateTarget); 
}); 
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears 
$('body').on('click', '.modal-close-btn', function() { 
    $('#modal-container').modal('hide'); 
}); 
//clear modal cache, so that new content can be loaded 
$('body').on('hidden.bs.modal', '.modal', function() { 
    $(this).removeData('bs.modal'); 
    $('modal-update-target').removeAttr("value"); 
}); 

$('#modal-container').on('click', '.modal-pagination-link', function (e) { 
    var updateTarget = $(this).attr('data-ajax-update'); 
    $('modal-update-target').attr('value', updateTarget); 
}); 

$('#modal-container').on('loaded.bs.modal', function() { 
    $(this).removeData('bs.modal'); 
    $('modal-update-target').removeAttr("value"); 
    var pagcontainers = $(this).find('#modal-pagination'); 
    var hrefs = $(pagcontainers).find('a').addClass('modal-pagination-link') 
              .attr('data-ajax', 'true') 
              .attr('data-ajax-mode', 'replace') 
              .attr('data-toggle', 'modal') 
              .attr('data-target', '#modal-container') 
              ; 

}); 

$('#modal-container').on('submit', '#asset-modal-frm', function (e) { 
    e.preventDefault(); 
    if (confirm("Are you sure?")) { 
     var data = $(this).serializeArray(); 
     $.ajax({ 
      url: '/licenses/allocate', 
      type: 'POST', 
      data: data, 

      success: function (data) { 
       for (var i = 0; i < data.length ; i++) { 
        $('#allocatedLicenses tr:last').after(
        $("<tr>").append($("<td>").text(data[i].name)) 
            .append($("<td>").text(data[i].manufacturerItem.serialNumber))); 
       } 
       $('#modal-container').modal('hide'); 
      } 
     }) 
    } 
}); 
}); 

我的html：

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog"> 
     <input id="modal-update-target" type="hidden"/> 
     <div class="modal-dialog"> 
      <div class="modal-content center-block" style="display: table;"> 
      </div> 
     </div> 
    </div> 

Answer 1

您使用錯誤的方法來隱藏元素。

更改此：

$('#modal-container').modal('hide'); 

要這樣：

$('#modal-container').hide(); 

或者，如果你想徹底從頁面刪除，改成這樣：

$('#modal-container').remove();