我读了Bootstrap网站上的帖子,疯狂地谷歌了一下——但我肯定找不到一个简单的答案……

我有一个Bootstrap模式,我从一个link_to helper像这样打开:

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

在我的ContactsController中。创建动作,我有创建联系人的代码,然后传递给create.js.erb。在create.js。erb,我有一些错误处理代码(ruby和javascript的混合)。如果一切顺利,我想关闭模态。

这就是我遇到麻烦的地方。当一切顺利的时候,我似乎不能放弃模态。

我尝试了$('#myModal').modal('hide');这没有任何影响。我还尝试了$('#myModal').hide();这导致模态解散,但留下背景。

关于如何在create.js.erb中关闭模式和/或解散背景,有什么指导吗?

Edit

下面是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>

当前回答

我面临着一个类似的问题,我的自定义模态将通过js显示,但我不能隐藏它(没有关闭按钮)。

对我来说,解决方案是将内容添加到模态对话框中。

<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="loading">
  <div class="modal-dialog">
    loading
  </div>
</div>

如果没有模态对话框,它会很高兴地显示模态,但如果在这里的一些答案中没有手动解决方案,则不可能隐藏它,其中一些解决方案阻止了您再次显示模态。

其他回答

我使用Bootstrap 3.4 对我来说,这行不通

$ (' # myModal’)模式(’hide’)

无奈之下,我这样做了:

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

也许这并不优雅,但很有效

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

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

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

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

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

我找到了正确的解决方案,您可以使用此代码

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

我也遇到过类似的问题。$ (' # myModal ') .modal(隐藏的);很可能运行该函数并命中该行

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

问题是,即使显示了模态,且该值应该为真,isshows值也可能是未定义的。我对引导代码进行了如下修改

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

这似乎在很大程度上解决了问题。如果背景仍然存在,你可以在$('.modal- background ').remove();;后添加一个调用来手动删除它。一点也不理想,但确实有用。

用bootstrap隐藏和显示模态的最佳形式是

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