Bootstrap Modal在提交時關閉

我一直在尋找解決這個問題的一段時間，但似乎沒有任何工作......我有一個從引導模式內的窗體，我需要執行驗證在提交之前提交表格。在提交時，它只是進入另一個頁面，很簡單。Bootstrap Modal在提交時關閉

但是當驗證失敗時，我想要的模式是而不是關閉，表單不會提交（已經到位），然後我在表單字段上有一些jquery-ui效果。我已經試過了諸如：

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

當驗證返回false，或添加到該模式的hide.bs.modal事件，但它只是假髮了，消失了，並且留下背景到位

... ？

引導程序和jquery-ui之間會有某種衝突嗎？我很驚訝沒有一種簡單的方式來禁用表單提交的模式關閉，但我想我不是第一個進入這場辯論的人。有什麼建議麼？？

來源

2014-09-30 Meowts

http://www.bootply.com/it2sNCJpqH – Christina 2014-09-30 21:48:32

這是偉大的，但我沒有得到什麼其中的一部分實際上是停止彈出關閉 - 它只是它使用的驗證插件？ – Meowts 2014-10-01 13:07:08

你有沒有想過這個？如果是這樣，也許給我一個答案？ http://stackoverflow.com/questions/31037565/form-within-bootsrtap-modal-closes-the-model-on-submit – 2015-06-24 21:44:27

我一直在尋找解決方案很長一段時間。我提出了以下「解決方案」，我寧願將其稱爲解決方法。我刪除了html表單元素和用於驗證的ajax。

HTML代碼：

<div class="modal fade" id="addCategoryModal" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title">Add Category</h4> 
      </div> 
      <div class="modal-body"> 

       <div class="form-group"> 
        <label for="categoryName">Category Name*</label> 
        <input type="text" class="form-control" id="categoryName" placeholder="Category Name"> 
       </div> 
       <div> 
        <button class="submit" id="addCategoryBtn">Submit</button> 
       </div> 

      </div> 
      <div class="modal-footer"> 
      <div id="message-warning" style="display: none;"></div> 
      <div id="message-success" style="display: none;"></div> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal -->

AJAX代碼：

$(document).ready(function() { 

/* Add Category*/ 
$('#addCategoryBtn').click(function() { 
     var categoryName = $('#categoryName').val(); 

     if (categoryName == "") { 
       $('#message-warning').html("Please add Category"); 
       $('#message-warning').fadeIn(); 
     } 
     else{ 

     var data = 'categoryName=' + categoryName; 
     $.ajax({ 
      type: "POST", 
      url: "insert.php", 
      data: data, 
      success: function(msg) { 

      // Category was added 
      if (msg == 'OK') { 
       $('#message-warning').hide(); 
       $('#categoryName').val(""); 
       $('#message-success').html("Category Added"); 
       $('#message-success').fadeIn(); 
      } 
      // There was an error 
      else { 
       $('#message-warning').html(msg); 
       $('#message-warning').fadeIn(); 
      } 

      } 

     }); 
    } 
});//End Add Category 


});//End Document Ready Function

來源

2015-12-18 15:29:46 Alay

感謝分享 - 這是很久以前，我才能記住確切的案例和切換工作，所以我沒有代碼了，但希望這會有所幫助！ – Meowts 2015-12-18 15:39:58

Bootstrap Modal在提交時關閉

回答

相關問題