我有一个打开模态的按钮但我通过单击背景或ESC键阻止了模态关闭。
我的按钮如下所示:
<button data-toggle="modal" data-target="#CompanyProfile"data-backdrop="static" data-keyboard="false">Click </button>
如何在使用jQuery成功$.ajax
后关闭此模式?
我做了一些测试 - 模态已关闭,但背景被锁定,在刷新页面之前我无法做任何事情
答案 0 :(得分:15)
要关闭bootstrap模式,您可以通过&#39;隐藏&#39;作为模态方法的选项如下。
$('#CompanyProfile').modal('hide');
在ajax成功中使用此代码。
答案 1 :(得分:1)
添加此解决方案,因为似乎没有列出通用方法。
如果您希望在成功时关闭任何模式,但又不希望将每个$ .ajax调用手工处理到服务器,则可以使用以下命令:
$('.modal form').on('submit', function(event) {
event.preventDefault();
$.ajax({
url: $(this).attr('action'),
type: 'POST',
data: $(this).serializeObject(),
contentType: 'application/json',
beforeSend: function(xhr){xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")},
success: function(data) {
console.log(data.success);
if(data.success===1) {
// loop through all modal's and call the Bootstrap
// modal jQuery extension's 'hide' method
$('.modal').each(function(){
$(this).modal('hide');
});
console.log('success');
} else {
console.log('failure');
}
}
});
});
顺便说一句,如果您希望将上面的代码用作复制/粘贴,则需要以下代码,该代码采用表单数据并将其转换为JSON以发布到服务器,或将$(this).serializeObject()
更改为$(this).serialize()
:
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
o = { request: o };
return o;
};
答案 2 :(得分:1)
您可以尝试
$( document ).ready(function() {
$(".btn").button().click(function(){ // button click
$('#CompanyProfile').modal('show') // Modal launch
$.ajax({
type: "POST",
url: "url",
data:{data:data},
cache: false,
success: function(data) {
$('.text').html(data);
}
})
});
});
确保模式仅启动一次
答案 3 :(得分:0)
您可以尝试以下内容。未经测试但你会得到这个想法。
$.ajax({
url: 'yourscript.php',
data: $('form#yourForm').serialize(),
type: 'post'
}).done(function(response) {
// trigger modal closing here since ajax is complete.
});
答案 4 :(得分:0)
我定义了我的模态:
<div class="modal fade" aria-hidden="true" role="dialog" id="modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button id="btnCloseModal" hidden type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Waiting</strong>
</div>
<div class="modal-content">
<div>
Please don't close your tab!
</div>
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div class="modal-footer">
<strong>Loading...</strong>
</div>
</div>
</div>
</div>
然后我使用create函数:
var StopLoadingAnimation = function () {
$('#modal').on('show.bs.modal', function (e) {
console.log("trigger show");
$("#btnCloseModal").trigger("click");
});
$('#modal').on('shown.bs.modal', function (e) {
console.log("trigger");
$("#btnCloseModal").trigger("click");
});
$('#modal').on('hidden.bs.modal', function (e) {
console.log("event");
$(e.currentTarget).off('shown');
$(e.currentTarget).off('show');
});
$("#btnCloseModal").trigger("click");
}
我的想法是,ajax成功后将调用函数StopLoadingAnimation,它将触发事件单击元素btnCloseModal(就像您在关闭模态时单击按钮btnCloseModal一样)
答案 5 :(得分:-1)
success :function(){
console.log("success");
$('#contact_modal').html("<img src='img/bg/success.gif'>").delay(3000).fadeOut(450);
$('body').removeClass('modal-open');
$('.modal-backdrop.show').css('opacity','0');
$('.modal-backdrop').css('z-index','-1')
}