如何使用javascript隐藏Bootstrap模态? [英] How to hide Bootstrap modal with javascript?

问题描述

我已经读过这里的内容，Bootstrap网站和疯狂搜索的Googled-但找不到我确定这是一个简单的答案...

I've read the posts here, the Bootstrap site, and Googled like mad - but can't find what I'm sure is an easy answer...

我有一个Bootstrap模态，它是从link_to助手中打开的，如下所示:

I have a Bootstrap modal that I open from a link_to helper like this:

<%= 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的混合).如果一切顺利，我想关闭模式.

In my ContactsController.create action, I have code that creates Contact then passes off to create.js.erb. In create.js.erb, I have some error handling code (a mix of ruby and javascript). If everything goes well, I want to close the modal.

这是我遇到麻烦的地方.当一切顺利的时候，我似乎无法消除这种模态.

This is where I'm having trouble. I can't seem to dismiss the modal when all goes well.

我尝试了$('#myModal').modal('hide');，但这没有任何效果.我也尝试过$('#myModal').hide();，这会导致模态消失，但会留下背景.

I've tried $('#myModal').modal('hide'); and this has no effect. I've also tried $('#myModal').hide(); which causes the modal to dismiss but leaves the backdrop.

有关如何在create.js.erb内关闭模式和/或消除背景的指南?

Any guidance on how to close the modal and/or dismiss the backdrop from within create.js.erb?

修改

这是myModal的标记:

Here's the markup for 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>

推荐答案

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

With the modal open in the browser window, use the browser's console to try

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

如果它有效(并且模式关闭)，则说明您的关闭Javascript没有正确地从服务器发送到浏览器.

If it works (and the modal closes) then you know that your close Javascript is not being sent from the server to the browser correctly.

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

If it doesn't work then you need to investigate further on the client what is happening. Eg make sure that there aren't two elements with the same id. Eg does it work the first time after page load but not the second time?

浏览器的控制台:firebug的firebug，Chrome或Safari的调试控制台等.

Browser's console: firebug for firefox, the debugging console for Chrome or Safari, etc.

这篇关于如何使用javascript隐藏Bootstrap模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！