如何使用javascript隐藏Bootstrap模式？

IT技术 javascript jquery twitter-bootstrap modal-dialog
2021-02-25 22:37:43

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

我有一个 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>
6个回答

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

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

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

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

浏览器控制台：firebug 的 firebug，Chrome 或 Safari 的调试控制台等。

第二段是我要找的。重复的 ID 使我的模态第二次无法正确显示。
2021-05-09 22:37:43
这为我解决了这个问题。谢谢。
2021-05-10 22:37:43

要关闭引导模式，您可以将“隐藏”作为选项传递给模态方法，如下所示

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

请在这里查看工作小提琴

bootstrap 还提供可以挂钩到模态功能的事件，例如，如果您想在模态完成对用户隐藏后触发事件，您可以使用hidden.bs.modal事件，您可以在此处阅读有关模态方法和事件的更多信息文档

如果上述方法都不起作用，请为您的关闭按钮指定一个 id 并触发点击关闭按钮。

当您确切知道模态对话框应该在什么时候关闭时，这尤其有用。例如在成功函数的末尾。这样，如果出现错误，对话框可以显示它。
2021-04-27 22:37:43

使用引导程序隐藏和显示模态的最佳形式

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');
迄今为止最好的答案。从长远来看，使用点击、jQuery 淡出或 css 模拟行为可能会造成错位。
2021-05-08 22:37:43

我使用 Bootstrap 3.4 对我来说这不起作用

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

无奈之下，我这样做了：

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

也许它不优雅，但它有效

小马车，但肯定有效。 下面 Manuel Fernando的解决方案非常适合我。
2021-04-21 22:37:43
@Umingo 如果这里提到的方法不好并且您知道一种方法，请推荐一种方法。
2021-04-22 22:37:43
如果你使用 $(".modal-backdrop").remove(); 会更好。
2021-05-03 22:37:43
jQuery('.modal-backdrop').click();
2021-05-06 22:37:43
这将引入新的错误。请使用推荐的方法，
2021-05-14 22:37:43

我遇到了同样的错误，这行代码真的对我有帮助。

$("[data-dismiss=modal]").trigger({ type: "click" });
我读过另一个问题，该问题表明该问题可能是元素上的 data-dismiss 属性，然后在此之上尝试从 javascript 触发它
2021-04-22 22:37:43
非常感谢曼努埃尔，经过大量搜索解决了我的问题，$('#MyModelId').modal('hide'); $("[data-dismiss=modal]").trigger({ type: "click" }); 我想关闭关于 ajax 成功的模式......真的非常感谢亲爱的
2021-04-23 22:37:43
其它你可能感兴趣的问题
上一篇Angular ui 路由器单元测试（状态到 url） 下一篇如何将我的脚本加载到 node.js REPL 中？