Javascript 如何在 AJAX 成功时以编程方式关闭 Bootstrap 3 模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36122756/
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 to close Bootstrap 3 modal programmatically on AJAX success?
提问by wobsoriano
I have a code that what I wanted to do is to close the modal on ajax success. This is my code:
我有一个代码，我想要做的是关闭 ajax 成功的模式。这是我的代码：
script
脚本
success: function() {
console.log("delete success");
$('#deleteContactModal').modal('hide');
$( "#loadContacts" ).load( "/main/loadContacts" );
}
html
html
<div class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<!--everything goes here -->
</div>
</div>
</div>
Everything just works except when the code $('#deleteContactModal').modal('hide');triggers, it just shows a black faded screen like this:
一切正常，除了代码$('#deleteContactModal').modal('hide');触发时，它只显示一个黑色的褪色屏幕，如下所示：
The modal closes but the black faded color is still present. Am I missing something here? Thank you in advance.
模态关闭，但黑色褪色仍然存在。我在这里错过了什么吗？先感谢您。
I'm using bootstrap 3.3.
我正在使用引导程序 3.3。
回答by Qazi
try to add this attribute with your modal div aria-hidden="true"
尝试使用您的模态 div 添加此属性 aria-hidden="true"
eg:
例如：
<div aria-hidden="true" class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
Here is my working example
这是我的工作示例
<div class="modal fade" id="copy_course_modal" tabindex="-1" role="dialog" aria-labelledby="copycourse" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="purchaseLabel">Copy Chapter</h4>
</div>
<div class="modal-body">
Modal body content here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="saveCopiedCourse()">Copy Course</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and on success doing same.
并在成功时做同样的事情。
$("#copy_course_modal").modal('hide');
回答by Vaios P.
I have the same exact problem and the only way I could find to work is to individually remove the parts of the modal is generating. Just put this function in yous js and make an onclick event at your button in your html or js. Hope I helped.
我有同样的问题，我能找到的唯一方法是单独删除正在生成的模态部分。只需将此功能放在您的 js 中，然后在您的 html 或 js 中的按钮上创建一个 onclick 事件。希望我有所帮助。
function hideModal(){
$(".modal").removeClass("in");
$(".modal-backdrop").remove();
$('body').removeClass('modal-open');
$('body').css('padding-right', '');
$(".modal").hide();
}
回答by WhoAmI
Try:
尝试：
$(".modal.in").modal("hide");
This will hide the currently active modal.
这将隐藏当前活动的模式。
回答by Steven Smith
Ran into this issue myself in a similar situation.
在类似的情况下，我自己也遇到了这个问题。
It seems to be related to the asynchronous nature of javascript + bootstrap animations.
这似乎与 javascript + bootstrap 动画的异步性质有关。
It's a dirty, dirty hack, but wrapping the call to 'hide' in a timeout made it work for me:
这是一个肮脏，肮脏的黑客，但是在超时中包装对“隐藏”的调用使它对我有用：
setTimeout( function(){$("#myModal").modal('hide')}, 300 );
If employing this "solution" to the problem, you may need to adjust the timeout value. Bootstrap animations seem to take around 125 - 200 ms, so 300 provides a nice safety buffer.
如果使用此“解决方案”来解决问题，您可能需要调整超时值。Bootstrap 动画似乎需要大约 125 - 200 毫秒，因此 300 提供了一个很好的安全缓冲区。
回答by Jasmeen
$('#deleteContactModal').modal('hide')
Find this link
找到这个链接
It gives detail https://getbootstrap.com/docs/3.3/javascript/#modal-hideregarding model window
它提供了有关模型窗口的详细信息https://getbootstrap.com/docs/3.3/javascript/#modal-hide
回答by paraguma
Simple programmatically click close button of dialog.
简单地以编程方式单击对话框的关闭按钮。
$("button[data-dismiss=\"modal\"]").click();
$("button[data-dismiss=\"modal\"]").click();
This will automatically close dialog.
这将自动关闭对话框。
回答by Caravansary
This is just a timing problem. The Fade animation takes time and javascript cant close it. just cancel the fade animation and it works properly!
这只是一个时间问题。淡入淡出动画需要时间，javascript 无法关闭它。只需取消淡入淡出动画即可正常工作！
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
...
</div>
(Not use class="modal fade", jus class="modal")
（不使用类=“模态淡出”，只使用类=“模态”）
回答by eric gilbertson
I tried several of the proposed solutions and the only one that worked for me was:
我尝试了几种建议的解决方案，唯一对我有用的是：
$(".modal.in").modal('hide');
$(".modal.in").modal('隐藏');
Some did clear the modal and the backdrop but then it did not redisplay on subsequent invocations.
有些确实清除了模态和背景，但随后没有重新显示。
回答by Al Shahirar
$.ajax({
type: "POST",
url: "admin/pc-item-insert.php",
data: $(this).serialize(),
success: function(data) {
$("#showinfo").html(data);
$(".modal").modal("hide");
},
});
回答by Philip Johnson
None of these options worked for me apart from the one that said don't use modal fade. However I wanted to use modal fade. My code was making an ajax call to save changes, and then on success was doing this:
除了说不使用模态淡入淡出的选项之外，这些选项都不适合我。但是我想使用模态淡入淡出。我的代码正在进行 ajax 调用以保存更改，然后成功执行以下操作：
$('#myModal').modal('hide');
doRefresh();
The problem was doRefresh was then updating the page under the modal. If I removed the doRefresh, it worked. So what I ended up doing was this:
问题是 doRefresh 然后在模态下更新页面。如果我删除了 doRefresh，它就起作用了。所以我最终做的是这样的：
$('#myModal').modal('hide');
setTimeout(doRefresh, 500);
