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

我该怎么办?


当前回答

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

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

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

其他回答

我也遇到过类似的问题:在我的模式窗口中,我有两个按钮,“取消”和“确定”。最初,这两个按钮都将通过调用$('#myModal').modal('hide')来关闭模式窗口(前面有"OK"执行一些代码),场景如下:

打开模态窗口 做一些操作,然后点击“确定”是否验证他们并关闭模式 再次打开模态并通过点击“取消”来取消 重新打开模式,再次点击“取消”==>背景不再可访问!

好吧,我旁边的同事帮了我大忙:不用调用$('#myModal').modal('hide'),而是给你的按钮赋予data-dismiss="modal"属性,并在你的"Submit"按钮中添加一个"click"事件。在我的问题中,按钮的HTML(好吧,TWIG)代码是:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

在我的JavaScript代码,我有:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

而没有“点击”事件归因于“取消”按钮。模态现在正确关闭,让我再次使用“正常”页面。实际上,似乎data-dismiss="modal"应该是指示按钮(或任何DOM元素)应该关闭Bootstrap模式的唯一方法。modal('hide')方法的行为似乎不太可控。

希望这能有所帮助!

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

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

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

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

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

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

希望这对你有帮助!

这个问题的另一个观点。 (我使用bootstrap.js 3.3.6版本)

我错误地在javascript中手动初始化模态:

$('#myModal').modal({
   keyboard: false
})

通过使用

模态数据-toggle = " "

在下面这个类似按钮的例子中(在文档中显示)

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

结果它创建了两个实例

<div class="modal-backdrop fade in"></div>

当打开模态时附加到我的HTML的主体。这可能是使用function关闭模态时的原因:

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

它只删除一个背景实例(如上所示),所以背景不会消失。但如果你使用data-dismiss="modal"在html上添加,它就会消失,就像bootstrap doc中显示的那样。

所以我的问题的解决方案是只初始化模式手动在javascript和不使用数据属性,这样我可以关闭模式手动和使用data-dismiss="modal"特性。

如果你遇到和我一样的问题,希望这能对你有所帮助。

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

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

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

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

从这个SO答案

从https://github.com/twbs/bootstrap/issues/19385

Modal的显示/隐藏方法是异步的。因此,代码如下: foo.modal(“隐藏”);bar.modal(“秀”);是无效的。你需要等待 实际完成的显示/隐藏(通过侦听 显示/隐藏事件;看到 http://getbootstrap.com/javascript/#modals-events) 再次显示或隐藏方法。

我有这个问题时,我打开相同的模式两次太快,所以一个简单的解决方法是检查它是否已经显示,然后不显示它再次:

$('#modalTitle').text(...);
$('#modalMessage').text(...);
if($('#messageModal').is(':hidden')){
    $('#messageModal').modal('show');
}