如何隐藏引导模式与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>

当前回答

我找到了正确的解决方案，您可以使用此代码

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

2016-01-02 12:34:14

其他回答

这是一个不好的做法，但你可以使用这种技术通过在javascript中调用close按钮来关闭模式。这将在3秒后关闭模式。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

2016-10-07 07:26:49

医生是这样说的: http://getbootstrap.com/javascript/#modals-methods

方法如下: $ (' # myModal ') .modal(隐藏的)

如果你需要多次打开不同内容的模态，我建议添加(在你的主js中):

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

因此，您将为下一个开放清理内容，并避免某种缓存

2015-11-06 17:07:44

$(" #模态”).modal(隐藏的);它的变体并不适用于我，除非我在取消按钮上有data-dismiss="modal"作为属性。像你一样，我的需求是可能关闭/可能-不关闭基于一些额外的逻辑，所以直接点击一个带有data-dismiss="modal"的链接是不行的。我最终有一个隐藏的按钮data-dismiss="modal"，我可以通过编程调用点击处理程序，所以

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

然后在点击处理程序中，当你需要关闭模态时取消

$('#hidden-cancel').click();

2017-02-27 17:34:36

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

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

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

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

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

2012-05-07 11:55:48

我也遇到过类似的问题。$ (' # 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

如何隐藏引导模式与javascript?

推荐文章

最新文章

标签