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

问题描述

我已经阅读了此处的帖子、Bootstrap 网站，并且疯狂地使用 Google 搜索 - 但找不到我确定的简单答案...

我有一个 Bootstrap 模式，我从这样的 link_to 助手打开:

<%= link_to "新联系人", new_contact_path, {remote: true, 'data-toggle' =>'模态', '数据目标' =>#myModal"，类: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-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">取消</a><%结束%>

<div class="modal-footer">

解决方案

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

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

如果它有效(并且模式关闭)，那么您就知道您关闭的 Javascript 没有从服务器正确发送到浏览器.

如果它不起作用，那么您需要在客户端上进一步调查发生了什么.例如，确保没有两个元素具有相同的 id.例如，它在页面加载后第一次有效但第二次无效吗?

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

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...

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"} %>

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.

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.

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

Edit

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');

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.

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?

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

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