logo标签列表

如何使用JavaScript隐藏Bootstrap模态框？

javascriptjquerytwitter-bootstrapmodal-dialog
352

我已经阅读了这里的帖子、Bootstrap网站以及疯狂地搜索了谷歌，但是找不到我确定很简单的答案......

我有一个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'); 是关闭/隐藏具有id myModal的模态框的正确语法（您可以在Bootstrap文档页面上测试此功能）。您确定页面上有此id的元素吗？另外，您想要通过此调用实现什么目的？您当前的实现会执行一个Ajax请求到new_contact_path，同时打开具有#myModal内容的模态框 - 这是您想要的吗？ - Julian D.
嗨，朱利安。我在上面发布了我的模态标记，并且确实有一个带有id“myModal”的div。我重新尝试了$（'myModal'）.modal（'hide'），但仍然不行。哎呀。就我想要实现的目标而言，我认为使用link_to助手可能是不正确的。我已经用<a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>替换了它，因为我不需要调用new_contact_path。我只想打开模态框，然后处理用户输入。感谢您抽出时间回复。我会看看能否解决这个问题。 - jvillian
我猜这只是一个打字错误，但是调用应该是$('#myModal').modal('hide');（你的评论中缺少一个#）。 - Julian D.
1
抱歉我打字而不是从实际代码中复制。实际的代码应该是：$('#myModal').modal('hide')。 - jvillian
你可以尝试使用bootboxjs。 - md. ariful ahsan
这里有一个小注释，但是在你的标记中，你的#myModal元素已经有了类'.hide'？手动将该类应用于该元素会导致模态关闭行为不稳定（例如，模态框会隐藏，但不会隐藏其后面的灰色覆盖层）。只是一个想法。 - Vidal Quevedo
27个回答
10

在“shown”回调发生后，我打电话的运气更好：

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

这样确保在调用 hide() 函数之前，模态框已经加载完成。

9
隐藏模态背景可以生效，但之后打开模态时背景不会像它应该的那样隐藏。我发现这个方法可以始终生效：
// SHOW
$('#myModal').modal('show')
$('.modal-backdrop').show();

// HIDE
$('#myModal').modal('hide');
$('.modal-backdrop').hide();
8

我使用了这个简单的代码：

$("#MyModal .close").click();
6
这里是文档：http://getbootstrap.com/javascript/#modals-methods 这里是方法： $('#myModal').modal('hide')
如果您需要打开多次具有不同内容的模态框，建议在主要 JS 中添加以下内容：
$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

因此，您将清除内容以供下一次打开，并避免一种缓存。
6
$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide');
6

我也遇到了同样的问题。这对我很有帮助。

$("[data-dismiss=modal]").trigger({ type: "click" });
6

我曾经遇到了同样的问题，经过一番尝试和实验，我找到了解决方法。在我的点击处理函数中，我需要阻止事件冒泡，具体如下：

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});
6

$('#modal').modal('hide');及其变体对我来说无效，除非在取消按钮上有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();
在我的情况下（asp net razor page），我和OP类似：我有一个带有“modal”类的相对空的div，并动态地向其中添加了一个cshtml文件，例如模态体，并在模态显示时向此体的按钮添加了单击事件。仅调用“.modal（'hide）”是不够的，正如您所指出的那样：“data-dismiss =”modal“”在调用按钮上是必要的！谢谢。 - Csharpest
5

在我的情况下，显然是在显示对话框后试图过快地关闭它。因此，在我的关闭模态函数中，我使用了以下代码：

setTimeout(() => {
    $('#loadingModal').modal('hide');
}, 300);
3

我知道这是一个老问题，但我发现这些答案都不是我确切需要的。似乎是由于在模态框显示完成之前尝试关闭它所导致的。

我的解决方案基于@schoonie23的答案，但我不得不做一些更改。

首先，在我的脚本顶部声明了一个全局变量：

<script>
    var closeModal = false;
    ...Other Code...

然后在我的模态代码中：

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

下面是翻译内容：

然后是这个：
（注意名称“shown.bs.modal”，表明模态框已完全显示，而不是在调用显示事件时触发的“show”。（我最初尝试使用“shown”，但它不起作用。）

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

希望这篇文章能帮助到一些人节省额外的研究时间。在我找到这个解决方案之前，我花了一些时间进行搜索。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接