如何使用JavaScript隐藏Bootstrap模态框？

Question

我已经阅读了这里的帖子、Bootstrap网站以及疯狂地搜索了谷歌，但是找不到我确定很简单的答案......

我有一个Bootstrap模态框，我通过link_to助手打开它，就像这样：

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

在我的ContactsController.create操作中，我有一些代码用于创建Contact，然后传递给create.js.erb。在create.js.erb中，我有一些错误处理代码（混合了ruby和javascript）。如果一切顺利，我想关闭模态框。

这就是我遇到问题的地方。当一切顺利时，我似乎无法关闭模态框。

我尝试了 $('#myModal').modal('hide');，但没有效果。我也尝试了 $('#myModal').hide();，它会让模态框消失，但是背景仍然存在。

有关如何从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>

- jvillian

---

$('#myModal').modal('hide'); 是关闭/隐藏具有id myModal的模态框的正确语法（您可以在Bootstrap文档页面上测试此功能）。您确定页面上有此id的元素吗？另外，您想要通过此调用实现什么目的？您当前的实现会执行一个Ajax请求到new_contact_path，同时打开具有#myModal内容的模态框 - 这是您想要的吗？ - Julian D.

嗨，朱利安。我在上面发布了我的模态标记，并且确实有一个带有id“myModal”的div。我重新尝试了$（'myModal'）.modal（'hide'），但仍然不行。哎呀。就我想要实现的目标而言，我认为使用link_to助手可能是不正确的。我已经用<a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>替换了它，因为我不需要调用new_contact_path。我只想打开模态框，然后处理用户输入。感谢您抽出时间回复。我会看看能否解决这个问题。 - jvillian

我猜这只是一个打字错误，但是调用应该是$('#myModal').modal('hide');（你的评论中缺少一个#）。 - Julian D.

抱歉我打字而不是从实际代码中复制。实际的代码应该是：$('#myModal').modal('hide')。 - jvillian

你可以尝试使用bootboxjs。 - md. ariful ahsan

这里有一个小注释，但是在你的标记中，你的#myModal元素已经有了类'.hide'？手动将该类应用于该元素会导致模态关闭行为不稳定（例如，模态框会隐藏，但不会隐藏其后面的灰色覆盖层）。只是一个想法。 - Vidal Quevedo

Answer 1

在浏览器窗口打开模态框后，使用浏览器的控制台进行尝试。

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

如果它起作用了（并且模态窗口关闭了），那么您就知道您的关闭JavaScript代码没有正确地从服务器发送到浏览器。

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

浏览器的控制台：Firefox浏览器的Firebug、Chrome或Safari的调试控制台等。

- Larry K

---

第二段是我正在寻找的。重复的ID会导致我的模态框第二次无法正确显示。 - Matias

这对我解决了问题。谢谢。 - Finchy70

请在此处提及Bootstrap版本。它将无法在当前的Bootstrap上工作。 - Firefog

在我的情况下，同一页上加载了不同版本的Bootstrap，例如4.6.1和5.0.1，这就是为什么模态隐藏没有起作用的原因！ - Khalid Bin Sarower

Answer 2

要关闭Bootstrap 模态框，您可以将'hide'作为选项传递给modal方法，如下所示。

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

请查看工作中的fiddle here Bootstrap还提供了一些事件，您可以将其钩入modal功能中。例如，如果您希望在模态框已经从用户隐藏后触发一个事件，您可以使用hidden.bs.modal事件。您可以在这里阅读有关模态框方法和事件的更多信息：Documentation 如果以上方法都不起作用，请给您的关闭按钮分配一个ID并触发关闭按钮的单击事件。

- Subodh Ghulaxe

---

当您确切地知道模态对话框应该关闭的时间点时，这将非常有用。例如，在成功函数的末尾。这样，如果出现错误，对话框可以显示它。 - Will

Answer 3

使用Bootstrap隐藏和显示模态框的最佳方式是

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

- Royer Vazquez

---

迄今为止最好的答案。使用点击、jQuery fadeOut 或 css 模拟行为可能会在长期运行中导致不对齐。 - Giorgio Tempesta

Answer 4

我使用的是 Bootstrap 3.4 对我来说这不起作用 $('#myModal').modal('hide')

我绝望了，于是我做了这个：

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

也许不够优美，但它有效

- gaza

---

请使用 $(".modal-backdrop").remove(); ，效果更佳。 - Bloodhound

这将引入新的错误。请使用推荐的方法。 - Benjamin Eckstein

jQuery('.modal-backdrop').click(); - user985818

有一点小问题，但肯定能够工作。Manuel Fernando的解决方案对我来说完美地奏效了。 - Munam Yousuf

@Umingo，请在这里提到的方法不好或者你知道更好的方法时推荐一种。 - span

谢谢@Gaza，在绝望的时候我们需要像你这样的英雄。 - Muhammad Raihan Muhaimin

Answer 5

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

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

- Manuel Fernando

---

我读到另一个问题，它暗示问题可能是在元素上有data-dismiss属性，然后在此基础上尝试从javascript触发它。 - realisation

非常感谢Manuel，经过长时间的搜索，他解决了我的问题：$('#MyModelId').modal('hide'); $("[data-dismiss=modal]").trigger({ type: "click" }); 我想在ajax成功后关闭模态框...真的非常感谢我的朋友。 - abdelrhman raafat

Answer 6

我找到了正确的解决方案，你可以使用这段代码。

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

- Osama khodroj

---

目前为止最佳解决方案 - LeTadas

超棒，简直是最棒的 +1 - MooMoo

Answer 7

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

- Shivam

---

它起作用了，但如果我再次打开模态框，它就会崩溃，模态框就无法滚动了。 - LeTadas

Answer 8

我遇到了一个类似的问题。 $('#myModal').modal('hide'); 可能正在执行该函数并且触发了此行。

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

问题在于，即使模态框已经显示且值应为true，但isShown的值可能未定义。我稍微修改了Bootstrap代码如下：

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

这似乎在很大程度上解决了问题。如果背景仍然存在，您可以在隐藏调用之后添加手动删除它的调用$('.modal-backdrop').remove();。不是理想的做法，但确实可行。

- Richard Handley

Answer 9

(涉及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

- Nathan

---

但您能告诉我关于 this.render() 的情况吗？在我的 Chrome 控制台中显示 undefined is not a function。 - Anil Kumar Pandey

Answer 10

我们发现的是，在调用服务器代码和返回成功回调之间只有轻微的延迟。如果我们将对服务器的调用包装在 $（“＃myModal”）.on（'hidden.bs.modal'，function（e）处理程序中，然后调用 $（“＃myModal”）.modal（ “hide”）; 方法，浏览器将隐藏模态并调用服务器端代码。

同样，虽然不太优雅但却是有用的。

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

如您所见，当调用 myFunc 时，它将隐藏模态框然后调用服务器端代码。

- markdotnet