Javascript 如何使用javascript隐藏Bootstrap模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10466129/
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 hide Bootstrap modal with javascript?
提问by jvillian
I've read the posts here, the Bootstrap site, and Googled like mad - but can't find what I'm sure is an easy answer...
我已经阅读了这里的帖子、Bootstrap 网站，并且疯狂地在 Google 上搜索 - 但找不到我确定的简单答案......
I have a Bootstrap modal that I open from a link_to helper like this:
我有一个 Bootstrap 模式，我从这样的 link_to 助手打开：
<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %>
In my ContactsController.createaction, I have code that creates Contactthen passes off to create.js.erb. In create.js.erb, I have some error handling code (a mix of ruby and javascript). If everything goes well, I want to close the modal.
在我的ContactsController.create操作中，我有创建Contact然后传递给create.js.erb. 在 中create.js.erb，我有一些错误处理代码（ruby 和 javascript 的混合）。如果一切顺利，我想关闭模态。
This is where I'm having trouble. I can't seem to dismiss the modal when all goes well.
这是我遇到麻烦的地方。当一切顺利时，我似乎无法忽略模态。
I've tried $('#myModal').modal('hide');and this has no effect. I've also tried $('#myModal').hide();which causes the modal to dismiss but leaves the backdrop.
我试过了$('#myModal').modal('hide');，这没有效果。我也试过$('#myModal').hide();这会导致模态关闭但离开背景。
Any guidance on how to close the modal and/or dismiss the backdrop from within create.js.erb?
关于如何关闭模态和/或从内部消除背景的任何指导create.js.erb？
Edit
编辑
Here's the markup for myModal:
这是 myModal 的标记：
<div class="modal hide" id="myModal" >
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Contact</h3>
<div id="errors_notification">
</div>
</div>
<div class="modal-body">
<%= form_for :contact, url: contacts_path, remote: true do |f| %>
<%= f.text_field :first_name, placeholder: "first name" %>
<%= f.text_field :last_name, placeholder: "last name" %>
<br>
<%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
<a class="close btn" data-dismiss="modal">Cancel</a>
<% end %>
</div>
<div class="modal-footer">
</div>
</div>
回答by Larry K
With the modal open in the browser window, use the browser's console to try
在浏览器窗口中打开模态，使用浏览器的控制台尝试
$('#myModal').modal('hide');
If it works (and the modal closes) then you know that your close Javascript is notbeing sent from the server to the browser correctly.
如果它有效（并且模式关闭），那么您就知道您的关闭 Javascript没有正确地从服务器发送到浏览器。
If it doesn't work then you need to investigate further on the client what is happening. Eg make sure that there aren't two elements with the same id. Eg does it work the first time after page load but not the second time?
如果它不起作用，那么您需要进一步调查客户端发生了什么。例如，确保没有两个元素具有相同的 id。例如，它在页面加载后第一次工作但第二次不工作吗？
Browser's console: firebug for firefox, the debugging console for Chrome or Safari, etc.
浏览器控制台：firebug 的 firebug，Chrome 或 Safari 的调试控制台等。
回答by Subodh Ghulaxe
to close bootstrap modalyou can pass 'hide'as option to modal method as follow
要关闭引导模式，您可以将“隐藏”作为选项传递给模态方法，如下所示
$('#modal').modal('hide');
Please take a look at working fiddle here
bootstrap also provide events that you can hook into modalfunctionality, like if you want to fire a event when the modal has finished being hidden from the user you can use hidden.bs.modalevent you can read more about modal methods and events here in Documentation
bootstrap 还提供可以挂钩到模态功能的事件，例如，如果您想在模态完成对用户隐藏后触发事件，您可以使用hidden.bs.modal事件，您可以在此处阅读有关模态方法和事件的更多信息文档
If non of the above method work, give a id to your close button and trigger click on close button.
如果上述方法都不起作用，请为您的关闭按钮指定一个 id 并触发点击关闭按钮。
回答by gaza
I use Bootstrap 3.4 For me this does not work
我使用 Bootstrap 3.4 对我来说这不起作用
$('#myModal').modal('hide')
$('#myModal').modal('hide')
In desperation,I did this:
无奈之下，我这样做了：
$('#myModal').hide();
$('.modal-backdrop').hide();
Maybe it's not elegant, but it works
也许它不优雅，但它有效
回答by Royer Vazquez
The Best form to hide and show a modal with bootstrap it's
使用引导程序隐藏和显示模态的最佳形式
// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');
回答by Manuel Fernando
I was experiencing with that same error and this line of code really helps me.
我遇到了同样的错误，这行代码真的对我有帮助。
$("[data-dismiss=modal]").trigger({ type: "click" });
回答by Shivam
$('#modal').modal('hide');
//hide the modal
$('body').removeClass('modal-open');
//modal-open class is added on body so it has to be removed
$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class
回答by Osama khodrog
I found the correct solution you can use this code
我找到了您可以使用此代码的正确解决方案
$('.close').click();
回答by Nathan
(Referring to Bootstrap 3), To hide the modal use: $('#modal').modal('hide'). But the reason the backdrop hung around (for me) was because I was destroying the DOM for the modal before 'hide' finished.
（参考 Bootstrap 3），隐藏模态使用：$('#modal').modal('hide')。但是背景挂在周围的原因（对我来说）是因为我在“隐藏”完成之前破坏了模态的 DOM。
To resolve this, I chained the hidden event with the DOM removal. In my case: this.render()
为了解决这个问题，我将隐藏事件与 DOM 删除链接起来。就我而言：this.render()
var $modal = $('#modal');
//when hidden
$modal.on('hidden.bs.modal', function(e) {
return this.render(); //DOM destroyer
});
$modal.modal('hide'); //start hiding
回答by Richard Handley
I ran into what I believe was a similar issue. The $('#myModal').modal('hide');is likely running through that function and hits the line
我遇到了我认为类似的问题。将$('#myModal').modal('hide');通过该功能可能运行和打线
if (!this.isShown || e.isDefaultPrevented()) return
The issue is that the value isShown may be undefined even if the modal is displayed and the value should be true. I've modified the bootstrap code slightly to the following
问题是即使显示了模态并且该值应该为真，值 isShown 也可能未定义。我已将引导程序代码稍微修改为以下
if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return
This seemed to resolve the issue for the most part. If the backdrop still remains you could always add a call to manually remove it after the hide call $('.modal-backdrop').remove();. Not ideal at all but does work.
这似乎在很大程度上解决了这个问题。如果背景仍然存在，您可以随时添加一个调用以在隐藏调用后手动删除它$('.modal-backdrop').remove();。根本不理想，但确实有效。
回答by schoonie23
I had better luck making the call after the "shown" callback occurred:
在“显示”回调发生后，我很幸运地拨打了电话：
$('#myModal').on('shown', function () {
$('#myModal').modal('hide');
})
This ensured the modal was done loading before the hide() call was made.
这确保在调用 hide() 之前完成模态加载。
