提问者:小点点

如何用JavaScript隐藏引导模式?


我读了这里的帖子,我的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>

共2个答案

匿名用户

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

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

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

如果它不起作用,那么您需要在客户端上进一步调查正在发生的事情。确保没有两个元素具有相同的ID。它在页面加载后第一次起作用,但第二次不起作用吗?

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

匿名用户

要关闭引导模式,您可以将“hide”作为选项传递给模式方法,如下所示

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

请看一下这里的工作小提琴

bootstrap还提供了可以与模式功能挂钩的事件,例如,如果您希望在模式完成对用户隐藏时激发事件,您可以使用hidden.bs.modal事件您可以在文档中阅读关于模式方法和事件的更多信息

如果上面的方法都不起作用,给你的关闭按钮一个id并触发点击关闭按钮。