Twitter引导模式背景不会消失

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

我该怎么办?

当前回答

对我来说，最好的答案是。

<body>
<!-- All other HTML -->
<div>
    ...
</div>

<!-- Modal -->
<div class="modal fade" id="myModal">
    ...
</div>

模式标记放置始终尝试将模态的HTML代码放在文档的顶层位置，以避免其他组件影响模态的外观和/或功能。

从这个SO答案

其他回答

我也遇到过类似的问题。我将Boostrap与Backbone结合使用，我捕捉到点击“Do it”按钮，然后停止这些事件的传播。奇怪的是，这让模态消失了，但背景却没有。如果我调用event.preventDefault()，但不调用stopPropagation()，这一切都很好。

我只是在这个问题上花了太多时间:)

虽然提供的其他答案是有帮助的和有效的，但对我来说，从Bootstrap有效地重新创建模态隐藏功能似乎有点混乱，所以我找到了一个更干净的解决方案。

问题是，当你打电话时，会发生一连串的事件

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

然后，当您替换AJAX请求的结果一堆HTML时，模式隐藏事件不会结束。然而，Bootstrap在一切完成时触发一个事件，你可以像这样钩入:

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

希望这对你有帮助!

确保对$.modal()的初始调用以应用模态行为没有传入比预期更多的元素。如果发生这种情况，它将为集合中的每个元素创建一个带有背景元素的模态实例。因此，它可能看起来像是背景被留下了，而实际上你正在看的是其中一个复制品。

在我的例子中，我试图用这样的代码创建模式内容:

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

在这里，结束</div>标记之后的HTML注释意味着myModal实际上是两个元素的jQuery集合——div和注释。他们都尽职地变成情态动词，每个都有自己的背景元素。当然，由注释组成的模态在背景之外是不可见的，所以当我关闭真正的模态(div)时，它看起来就像背景被留下了一样。

供你参考，如果有人遇到这种情况……我花了大约3个小时发现最好的方法如下:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

关闭模态的函数非常不直观。

use:

$('.modal.in').modal('hide')

源

推荐文章