Javascript AJAX成功后如何关闭模态窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35773985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I close a modal window after AJAX success
提问by Rimaz
I have a button which opens a modal but I have prevented the modal close by clicking background or ESC key.
我有一个打开模态的按钮，但我通过单击背景或 ESC 键阻止了模态关闭。
My button looks like this:
我的按钮看起来像这样：
<button data-toggle="modal" data-target="#CompanyProfile"data-backdrop="static" data-keyboard="false">Click </button>
How do I close this modal after $.ajaxsuccess using jQuery?
$.ajax使用 jQuery 成功后如何关闭此模式？
I have done a few tests - the modal has closed but the background gets locked, and I cannot do anything until I refresh the page
我做了一些测试 - 模态已经关闭，但背景被锁定，在刷新页面之前我无法做任何事情
回答by Rino Raj
To close bootstrap modal you can pass 'hide' as option to modal method as follows.
要关闭引导模式，您可以将 'hide' 作为选项传递给 modal 方法，如下所示。
$('#CompanyProfile').modal('hide');
Use this code inside ajax success.
在 ajax 中使用此代码成功。
回答by Kraang Prime
Adding this solution since there doesn't seem to be a generic method listed.
添加此解决方案，因为似乎没有列出通用方法。
If you wish to close any modal on success, but don't wish to hand-craft each $.ajax call to the server, you could use the following :
如果您希望在成功时关闭任何模式，但不想手工制作每个 $.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');
}
}
});
});
As an aside, if you are looking to use the code above as copy/paste, you will need the following which takes form data and converts it into JSON for posting to the server, or change the $(this).serializeObject()to $(this).serialize():
顺便说一句，如果您希望将上面的代码用作复制/粘贴，您将需要以下内容来获取表单数据并将其转换为 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;
};
Reference: Bootstrap JS Modal
回答by S.Maina
You can try something like
你可以尝试类似的东西
$( 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);
}
})
});
});
Make sure the modal is launched only once
确保模态只启动一次
回答by TrungNgo
I define my modal :
我定义了我的模态：
<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>
then I use create function :
然后我使用创建功能：
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");
}
}
My idea is after ajax success is will call function StopLoadingAnimation what will trigger event click on element btnCloseModal ( It like you click button btnCloseModal when you closing modal )
我的想法是在 ajax 成功之后会调用函数 StopLoadingAnimation 什么会触发事件点击元素 btnCloseModal （就像你在关闭模式时点击按钮 btnCloseModal ）
回答by Ben Fransen
You can try something like below. Untested but you'll get the idea.
您可以尝试以下操作。未经测试，但你会明白的。
$.ajax({
url: 'yourscript.php',
data: $('form#yourForm').serialize(),
type: 'post'
}).done(function(response) {
// trigger modal closing here since ajax is complete.
});
回答by user11527984
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')
}
