我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
我只是在这个问题上花了太多时间:)
虽然提供的其他答案是有帮助的和有效的,但对我来说,从Bootstrap有效地重新创建模态隐藏功能似乎有点混乱,所以我找到了一个更干净的解决方案。
问题是,当你打电话时,会发生一连串的事件
$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()
然后,当您替换AJAX请求的结果一堆HTML时,模式隐藏事件不会结束。然而,Bootstrap在一切完成时触发一个事件,你可以像这样钩入:
$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);
希望这对你有帮助!
其他回答
另一个可能导致这个问题的错误,
确保你没有在页面中不止一次地包含bootstrap.js脚本!
使用切换而不是隐藏,解决了我的问题
在应用了最高评级的解决方案后,我有一个问题,它打破了将来情态动词正确打开。我已经找到了我的解决方法
element.on("shown.bs.modal", function () {
if ($(".modal-backdrop").length > 1) {
$(".modal-backdrop").not(':first').remove();
}
element.css('display', 'block');
});
我也有同样的问题。
然而,我使用bootbox.js,所以这可能是与此有关。
不管怎样,我意识到这个问题是由一个元素与它的父类具有相同的类引起的。当其中一个元素被用来绑定一个点击函数来显示模态时,就会出现问题。
这就是问题的原因:
<div class="myElement">
<div class="myElement">
Click here to show modal
</div>
</div>
更改它,以便被点击的元素不具有与其父类、任何子类或任何其他父类相同的类。通常在绑定单击函数时这样做可能是一个很好的实践。
我正在和流星一起工作,我也遇到了同样的问题。我的bug的原因是:
{{#if tourmanager}}
{{>contactInformation tourmanager}}
{{else}}
<a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
{{>addArtistTourmanagerModal}}
{{/if}}
正如你所看到的,我在else中添加了模态,所以当我的模态更新联系人信息时,if有另一个状态。这导致模态模板在DOM即将关闭之前被排除在外。
解决方案:将模态移出if-else:
{{#if tourmanager}}
{{>contactInformation tourmanager}}
{{else}}
<a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
{{>addArtistTourmanagerModal}}
{{/if}}