Twitter bootstrap模态背景不会消失

Question

我正在使用Twitter引导模态对话框。当我单击bootstrap模式对话框的提交按钮时，它会发送一个AJAX请求。我的问题是模态背景不会消失。“模态”对话框确实消失了，但是“模态背景”会在屏幕上创建不透明度

Answer 1

当您执行AJAX请求时，请确保您没有替换包含实际模态窗口的容器，因为当您尝试关闭它时，Bootstrap将无法找到对它的引用。在Ajax完整处理程序中删除模态然后替换数据。

如果这不起作用，您可以通过执行以下操作来强制它消失：

$('#your-modal-id').modal('hide');

$('body').removeClass('modal-open');

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

Answer 2

确保您$.modal()应用模态行为的初始调用不会传递超出预期的元素。如果发生这种情况，它将最终为集合中的EACH元素创建一个带有背景元素的模态实例。因此，看起来背景可能已被遗忘，实际上你正在查看其中一个副本。

就我而言，我试图使用这样的代码动态创建模态内容：

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');

$('body').append(myModal);

myModal.modal();

在这里，结束</div>标记之后的HTML注释意味着myModal实际上是两个元素的jQuery集合 - div和注释。他们两个都尽职尽责地变成了模态，每个都有自己的背景元素。当然，除了背景之外，评论所形成的模态是不可见的，所以当我关闭真实模态（div）时，它看起来就像是留下了背景。

Answer 3

我只是花了太长时间才解决这个问题:)

虽然提供的其他答案都是有用且有效的，但是我从Bootstrap中有效地重新创建模态隐藏功能似乎有点麻烦，所以我找到了一个更清晰的解决方案。

问题是当你打电话时会发生一系列事件

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

functionThatEndsUpDestroyingTheDOM()

当您因为AJAX请求而替换一堆HTML时，模态隐藏事件无法完成。但是，当一切都完成时，Bootstrap会触发一个事件，你可以像这样挂钩：

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

希望这有用！