如何隐藏引导模式与javascript?

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

当前回答

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

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

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

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

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

2012-11-01 23:18:33

其他回答

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

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

2014-11-30 21:13:30

(参考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

2014-04-29 20:08:47

我使用了这个简单的代码:

$("#MyModal .close").click();

2019-05-11 12:06:50

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

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

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

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

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

2012-11-01 23:18:33

我也遇到过同样的问题，经过一些实验，我找到了一个解决方案。在我的点击处理程序中，我需要停止事件冒泡，如下所示:

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

2013-07-11 19:51:08

如何隐藏引导模式与javascript?

推荐文章

最新文章

标签