如何隐藏引导模式与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').on('shown', function () {
      $('#myModal').modal('hide');
})

这确保了模态在调用hide()之前完成加载。

2014-07-17 16:31:18

其他回答

用bootstrap隐藏和显示模态的最佳形式是

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

2016-09-09 04:08:35

医生是这样说的: 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

我面临着一个类似的问题，我的自定义模态将通过js显示，但我不能隐藏它(没有关闭按钮)。

对我来说，解决方案是将内容添加到模态对话框中。

<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="loading">
  <div class="modal-dialog">
    loading
  </div>
</div>

如果没有模态对话框，它会很高兴地显示模态，但如果在这里的一些答案中没有手动解决方案，则不可能隐藏它，其中一些解决方案阻止了您再次显示模态。

2022-06-17 13:55:59

如果你在情态动词中使用close类，下面的方法可以工作。根据您的用例，如果close类有多个模态，我通常建议只过滤到可见模态。

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

2019-04-07 16:57:05

我们发现，在对服务器代码的调用和返回成功回调之间只有轻微的延迟。如果我们将对服务器的调用包装在$("#myModal").on('hidden.bs. 'modal'，函数(e)处理程序，然后调用$("#myModal").modal("hide");方法，浏览器将隐藏模式，然后调用服务器端代码。

同样，不是优雅，而是实用。

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

如您所见，当myFunc被调用时，它将隐藏模式，然后调用服务器端代码。

2016-09-16 18:28:31

如何隐藏引导模式与javascript?

推荐文章

最新文章

标签