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个回答
3

我们需要注意事件冒泡。需要加入一行代码。

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });
2

使用document.getElementById('closeButton').click()方法可以模拟点击关闭按钮，同时也可以在模态框中的某个元素上添加data-dismiss="modal"属性并赋予该元素此ID来实现相同的效果。

1

我曾经遇到过类似的问题，我的自定义模态框可以通过js显示，但是我无法隐藏它（没有关闭按钮）。

对我来说，解决方案是将内容添加到modal-dialog中。

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

如果没有modal-dialog，它会愉快地显示模态框，但是在这里的一些答案中，没有手动解决方案就无法隐藏它，其中一些解决方案会防止您再次显示模态框。

1
我使用了以下代码 -
使用淡出效果隐藏模态框。
$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});
0
如果您在模态框中使用close类，则以下内容将起作用。根据您的用例，如果有多个带有close类的模态框，我通常建议仅过滤到可见模态框。
$('.close:visible').click();
-1

这是一种不好的做法，但你可以使用这种技术通过在JavaScript中调用关闭按钮来关闭模态框。这将在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>
-1

有时候

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

不起作用，因此您需要将其添加到模态框的页脚：

<button type="button" id="close_cred_modal" class="btn btn-secondary" data-dismiss="modal">Close</button>

然后将此行添加到关闭模态框

$('#close_cred_modal').click();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接