如何从JavaScript中隐藏Bootstrap模态？

我已经阅读这里的post，Bootstrap网站，并疯狂Googlesearch – 但无法find我敢肯定的是一个简单的答案…

我有一个Bootstrap模式，我从一个link_to这样的助手打开：

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %> 

在我的ContactsController.create操作中，我有创buildContact代码，然后传递给create.js.erb 。 在create.js.erb ，我有一些error handling代码（混合使用ruby和javascript）。 如果一切顺利，我想closures模式。

这是我有麻烦的地方。 一切顺利的时候，我似乎无法排除模态。

我试过$('#myModal').modal('hide'); 这没有效果。 我也试过$('#myModal').hide(); 导致模式解散，但离开的背景。

有关如何closures模式和/或从create.js.erbclosures背景的create.js.erb ？

编辑

这是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> 

Answer 1

在浏览器窗口中打开模式，使用浏览器的控制台尝试

 $('#myModal').modal('hide'); 

如果它工作（和模式closures），那么你知道你的closuresJavascript 不是正确的从服务器发送到浏览器。

如果它不起作用，那么你需要进一步调查客户端发生了什么事情。 例如，确保没有两个具有相同ID的元素。 例如，页面加载后第一次运行，但不是第二次？

浏览器的控制台：Firefox的firebug，Chrome或Safari的debugging控制台等

Answer 2

要closures自举模态，你可以将'隐藏'作为选项传给模态方法

 $('#modal').modal('hide'); 

请看这里的工作小提琴

引导程序还提供了可以挂钩到模态function的事件，例如，如果要在模块完成对用户隐藏时触发事件，则可以使用hidden.bs.modal事件，您可以在这里阅读有关模态方法和事件的更多信息文档

如果上述方法的非工作，给你的closuresbutton，并点击closuresbutton。

Answer 3

我使用Bootstrap 3.4对于我来说这是行不通的

$('#myModal').modal('hide')

无奈之下，我做到了这一点：

 $('#myModal').hide(); $('.modal-backdrop').hide(); 

也许这不是优雅的，但它的作品

Answer 4

我遇到了同样的错误，这行代码真的帮助我。

 $("[data-dismiss=modal]").trigger({ type: "click" }); 

Answer 5

 $('#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 

Answer 6

我遇到了我认为是类似的问题。 $('#myModal').modal('hide'); 很可能会通过该function并击中线路

 if (!this.isShown || e.isDefaultPrevented()) return 

问题是即使显示模态并且值应该为真，值显示也可能是未定义的。 我已经稍微修改了引导代码以下

 if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return 

这似乎解决了大部分问题。 如果背景仍然存在，您可以随时添加一个调用，以便在隐藏调用$('.modal-backdrop').remove();后手动删除它$('.modal-backdrop').remove(); 。 根本不理想，但工作。

Answer 7

我find了正确的解决scheme，您可以使用此代码

 $('.close').click(); 

Answer 8

（引用Bootstrap 3），隐藏模式使用： $('#modal').modal('hide') 。 但是背景的原因（对我来说）是因为我在“隐藏”之前就销毁了模式的DOM。

为了解决这个问题，我用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 

Answer 9

“显示”callback发生后，我有更好的运气：

 $('#myModal').on('shown', function () { $('#myModal').modal('hide'); }) 

这确保模块在hide（）调用之前完成加载。

Answer 10

这里是文档： http ： //getbootstrap.com/javascript/#modals-methods

这里是方法：$（'＃myModal'）。modal（'hide'）

如果您需要打开几次不同内容的模式，我build议添加（在您主要的js）：

 $('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); }); 

所以你会清理下一个开放的内容，并避免一种caching

Answer 11

我遇到了同样的问题，经过一些实验，我发现了一个解决scheme。 在我的点击处理程序中，我需要停止事件冒泡，如下所示：

 $("a.close").on("click", function(e){ $("#modal").modal("hide"); e.stopPropagation(); }); 

Answer 12

我们需要照顾事件冒泡。 需要添加一行代码

 $("#savechanges").on("click", function (e) { $("#userModal").modal("hide"); e.stopPropagation(); //This line would take care of it }); 

Answer 13

我意识到这是一个古老的问题，但我发现这些都不是我真正想要的东西。 这似乎是由于在完成显示之前试图closures模态而引起的。

我的解决scheme是基于@ schoonie23的答案，但我不得不改变一些东西。

首先，我在脚本的顶部声明了一个全局variables：

 <script> var closeModal = false; ...Other Code... 

然后在我的模态代码：

 $('#myModal').on('show.bs.modal', function (event) { ...Some Code... if (someReasonToHideModal) { closeModal = true; return; } ...Other Code... 

然后这:(请注意名称'shown.bs.modal'，指示模式已经完全显示，而不是show'触发show事件被调用时（我最初尝试只是'显示'，但它没有工作。 ）

 $('#myModal').on('shown.bs.modal', function (event) { if (closeEditModal) { $('#myModal').modal('hide'); closeModal = false; } }); 

希望有一天能省下一些额外的研究。 在提出这个问题之前，我花了一些时间寻找解决scheme。

Answer 14

 $('.modal-backdrop').hide(); // for black background $('body').removeClass('modal-open'); // For scroll run $('#modal').modal('hide'); 

Answer 15

我们发现，在调用我们的服务器代码和返回成功callback之间只有一点点的延迟。 如果我们在$("#myModal").on('hidden.bs.modal', function (e)处理程序然后调用$("#myModal").modal("hide");方法，浏览器将隐藏模式，然后调用服务器端代码。

再次，不优雅，但function。

  function myFunc(){ $("#myModal").on('hidden.bs.modal', function (e) { // Invoke your server side code here. }); $("#myModal").modal("hide"); }; 

正如你所看到的，当myFunc被调用时，它将隐藏模式，然后调用服务器端代码。

Answer 16

即使我有同样的问题。 这帮了我很多

 $("[data-dismiss=modal]").trigger({ type: "click" }); 

Answer 17

最好的forms来隐藏和显示模式与引导它

 //OPEND $('#ModalForm').modal('show'); //HIDE $('#ModalForm').modal('hide'); 

Answer 18

这是不好的做法，但你可以使用这种技术通过在javascript中调用closuresbutton来closures模式。 这将在3秒后closures模式。

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> window.onload=function() { setInterval(function(){ $("#closemodal").click(); }, 3000); } </script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button> </div> </div> </div> </div> </div> </body> </html> 

Answer 19

$('#modal').modal('hide'); 而且它的变体不适用于我，除非我在取消button上有data-dismiss="modal"属性。 和你一样，我的需求是基于一些额外的逻辑可能closures/可能不closures，所以点击一个链接与data-dismiss="modal"彻底不会。 我结束了一个隐藏的button与data-dismiss="modal" ，我可以编程方式调用点击处理程序，所以

 <a id="hidden-cancel" class="hide" data-dismiss="modal"></a> <a class="close btn">Cancel</a> 

然后在点击处理程序中取消，当你需要closures你可以拥有的模态

 $('#hidden-cancel').click();