如何用javascript隐藏Bootstrap模式？

Question

我已经阅读了这里的帖子，Bootstrap网站，以及Googled就像疯了一样 - 但找不到我确定的简单答案......

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

Answer 1

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

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

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

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

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

Answer 2

关闭bootstrap modal您可以将＆＃39;隐藏＆＃39; 作为模式方法的选项，如下所示

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

请查看 fiddle here

bootstrap还提供了可以挂钩到modal功能的事件，就像你想要在模式完成对用户隐藏时触发事件你可以使用 hidden.bs.modal 事件您可以在 Documentation

中详细了解模态方法和事件

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

Answer 3

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

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

绝望中，我这样做了：

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

也许它不优雅，但它有效

Answer 4

我遇到了同样的错误，这行代码确实帮助了我。

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

Answer 5

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

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

Answer 6

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

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class

Answer 7

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

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

Answer 8

（参考Bootstrap 3），隐藏模态使用：$('#modal').modal('hide')。但是背景（对我而言）的原因是因为我在隐藏＆＃39;之前摧毁了模态的DOM。完了。

为了解决这个问题，我删除了DOM的隐藏事件。就我而言：this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding

Answer 9

我遇到了我认为类似的问题。 $('#myModal').modal('hide');可能正在运行该功能并点击该行

if (!this.isShown || e.isDefaultPrevented()) return

问题是，即使显示模态且值应为true，值isShown也可能未定义。我已经将引导代码稍微修改为以下

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

这似乎在很大程度上解决了这个问题。如果背景仍然存在，您可以随时添加呼叫，以便在隐藏调用$('.modal-backdrop').remove();后手动删除它。根本不理想，但确实有效。

Answer 10

在“显示”回调发生后，我有更好的运气：

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

这确保在进行hide（）调用之前完成模态加载。

Answer 11

我们发现在调用服务器代码和返回成功回调之间只有一点点延迟。如果我们在$("#myModal").on('hidden.bs.modal', function (e)处理程序中将调用包装到服务器然后调用$("#myModal").modal("hide");方法，则浏览器将隐藏模态，然后调用服务器端代码。

同样，不优雅但功能齐全。

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

正如您所看到的，当调用myFunc时，它将隐藏模态，然后调用服务器端代码。

Answer 12

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

Answer 13

这是doc： http://getbootstrap.com/javascript/#modals-methods

这是方法：     $（＆＃39;＃myModal＆＃39）的模态。（＆＃39;隐藏＆＃39）

如果您需要多次打开具有不同内容的模态，我建议添加（在您的主要js中）：

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

因此，您将清理下一个开头的内容并避免一种缓存

Answer 14

我遇到了同样的问题，经过一些实验后我找到了解决方案。在我的点击处理程序中，我需要阻止事件冒泡，如下所示：

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

Answer 15

我意识到这是一个老问题，但我发现这些都不是我真正想要的。这似乎是因为在模式完成之前试图关闭模态。

我的解决方案是基于@ schoonie23的答案，但我不得不改变一些事情。

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

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

然后在我的模态代码中：

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

然后这个:(注意名称＆＃39; shown.bs.modal＆＃39;表示模式完全显示而不是显示＆＃39;在调用show事件时触发。我原本只是试图“但是它没有用。”

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

希望有一天能为某人节省额外的研究费用。在我提出这个问题之前，我花了一些时间寻找解决方案。

Answer 16

我们需要照顾事件冒泡。需要添加一行代码

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

Answer 17

即使我有同样的问题。这对我有很大帮助

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

Answer 18

$('#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();

Answer 19

这是不好的做法，但您可以使用此技术通过在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>

Answer 20

如果您在模态中使用close类，则可以执行以下操作。根据您的用例，如果封闭类有多个模态，通常建议仅过滤到可见模态。

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

Answer 21

我使用了此代码-

使用淡出功能隐藏模态并具有平滑效果。

$('#myModal').fadeOut();

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

$('.modal-open').css({'overflow': 'visible'});

Answer 22

我使用了以下简单代码：

$("#MyModal .close").click();

Answer 23

document.getElementById（'closeButton'）。click（）; //向模式中的元素添加data-dismiss =“ modal”属性，并为其指定该ID

Answer 24

隐藏模态背景可以工作，但是随后打开模态和背景不会像应有的那样隐藏。我发现这始终如一：

// SHOW
$('#myModal').modal('show')
$('.modal-backdrop').show();

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

Answer 25

这可以仅用HTML来完成：

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>