我一直在寻找这个问题的解决方案,但似乎没有任何效果......我在 Bootstrap 的模态中有一个表单,我需要在提交之前对表单进行验证。提交后,它会转到另一个页面,很简单。
但是当验证失败时,我想要的是模式不关闭,表单不会提交(已经到位),然后我在表单上有一些jquery-ui效果领域。我试过类似的东西:
$('#modalDiv').modal('show');
当验证返回 false,或将其添加到该模态的 hide.bs.modal 事件中,但它只是假发消失,消失,并将背景留在原地...?
bootstrap 和 jquery-ui 之间会不会有某种冲突?我很惊讶没有一种简单的方法可以禁用表单提交时的模式关闭,但我想我不是第一个参与这场辩论的人,哈哈。有什么建议吗??
最佳答案
我一直在寻找解决方案。我想出了以下“解决方案”,我宁愿称之为解决方法。我删除了 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">×</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
关于forms - Bootstrap Modal 在提交时关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26129395/