Boostrap 3 - 在ajax提交後如何顯示模態表單對話框

Question

我有一個變成模態的boostrap面板。我在同一頁上有一個窗體，其中包含的模式看起來更像是一個基於我正在使用的主題的面板

我不知道如何在窗體返回成功提交時載入模態 我看過像這樣的一個

Final: AJAX/jQuery/PHP Form submission and modal box open on success

這各種類似的問題是打開的模式按鈕點擊，但我不知道如何做到這一點的阿賈克斯成功

小模態

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button> 
      <h4 class="modal-title">Small Modal</h4> 
     </div> 
     <div class="modal-body">...</div> 
    </div> 
    </div> 
</div> 

按鈕明顯切換的模式/關閉，但我如何通過jQuery的控制模式

您的幫助非常感謝

Answer 1

<div class="modal fade bs-example-modal-sm" id="modalExample" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button> 
      <h4 class="modal-title">Small Modal</h4> 
     </div> 
     <div class="modal-body">...</div> 
    </div> 
    </div> 
</div> 

稱其爲：$('#modalExample').modal();

Answer 2

你可以在Google和GetBootstrap找到很多信息。 下面是一個簡單的例子：

HTML

<div class="modal fade bs-example-modal-sm" id="modalToDisplay" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button> 
      <h4 class="modal-title">Small Modal</h4> 
     </div> 
     <div class="modal-body">...</div> 
    </div> 
    </div> 
</div> 

JS

function doAjaxCall() { 
    $.ajax({ 
     type: "POST", 
     url: "", //url to your page 
     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(datas) { 

      $('#modalToDisplay').modal('show'); 

     } 
    }); 
}