我读了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>

当前回答

在我的情况下,我显然是试图在显示对话框后过快地关闭它。所以在我的闭合模态函数中,我使用了这个:

setTimeout(() => {
    $('#loadingModal').modal('hide');
}, 300);

其他回答

如果你在情态动词中使用close类,下面的方法可以工作。根据您的用例,如果close类有多个模态,我通常建议只过滤到可见模态。

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

在我的情况下,我显然是试图在显示对话框后过快地关闭它。所以在我的闭合模态函数中,我使用了这个:

setTimeout(() => {
    $('#loadingModal').modal('hide');
}, 300);

就连我也有同样的问题。这对我帮助很大

$("[data-dismiss=modal]").trigger({ type: "click" });
$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

有时

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

没有得到的工作,所以你需要添加这个到你的模式的页脚:

<button type="button" id="close_cred_modal" class="btn btn-secondary" data-dismiss="modal">Close</button>

然后加上这一行来关闭模态

$('#close_cred_modal').click();