如何用javascript隐藏Bootstrap模式？

我已经阅读了这里的帖子,Bootstrap网站,以及Googled就像疯了一样 – 但找不到我确定的简单答案……

我有一个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>

解决方法:

在浏览器窗口中打开模式后,使用浏览器的控制台进行尝试

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

如果它工作(并且模式关闭),那么您知道您的关闭Javascript没有正确地从服务器发送到浏览器.

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

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

标签：javascript,twitter-bootstrap,modal-dialog
来源： https://codeday.me/bug/20190926/1820774.html