如何使用 javascript 隐藏 Bootstrap 模式？

Question

我已经阅读了这里的帖子，Bootstrap 网站，并且疯狂地用谷歌搜索 - 但找不到我确定是一个简单的答案……

我有一个从 link_to 助手打开的 Bootstrap 模式，如下所示：

<%= 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

如果它有效（并且模态关闭），那么您就知道您关闭的 Javascript 没有 正确地从服务器发送到浏览器。

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

浏览器控制台：firefox的firebug，Chrome或Safari的调试控制台等。

原文由 Larry K 发布，翻译遵循 CC BY-SA 3.0 许可协议