我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
这行代码在许多搜索后解决了我的问题,我想关闭ajax成功的模式:
$('#exampleModal').modal('hide');
$("[data-dismiss=modal]").trigger({ type: "click" });
非常感谢,曼纽尔·费尔南多 https://stackoverflow.com/a/27218322/5935763
其他回答
我在提交表单时也遇到了同样的问题。解决方案是将按钮类型从submit更改为button,然后处理按钮单击事件,如下所示:
'click .js-save-modal' () {
$('#myFormId').submit();
$('#myModalId').modal('hide');
}
这个问题也会发生,如果你隐藏,然后再次显示模式窗口太快。这一点在其他地方提到过,但我将在下面提供更多细节。
这个问题与时间和渐变过渡有关。如果你在前一个模式的淡出过渡完成之前显示了一个模式,你会看到这个持续的背景问题(模式背景会以你的方式留在屏幕上)。Bootstrap显式地不支持多个同时的模态,但这似乎是一个问题,即使你隐藏的模态和你显示的模态是相同的。
如果这是你的问题的正确原因,这里有一些缓解问题的选择。选项#1是一个快速而简单的测试,可以确定渐隐过渡时间是否确实是问题的原因。
禁用模态的Fade动画(从对话框中删除Fade类) 更新模态的文本,而不是隐藏并重新显示它。 修正时间,使它不会显示模态,直到它完成隐藏前一个模态。使用模态的事件来做到这一点。http://getbootstrap.com/javascript/#modals-events
这里有一些相关的引导问题跟踪帖子。追踪者的帖子可能比我下面列出的要多。
https://github.com/twbs/bootstrap/issues/735 https://github.com/twbs/bootstrap/issues/2839 https://github.com/twbs/bootstrap/issues/19385
如果您正在使用从getboostrap站点本身复制并粘贴到html生成的选择器中,请确保您删除了注释'<!——/。模态——>”。Bootstrap会感到困惑,认为注释是第二个模态元素。它为这个“第二个”元素创建了另一个背景。
另一个可能导致这个问题的错误,
确保你没有在页面中不止一次地包含bootstrap.js脚本!
有些情况下,其他答案(有帮助的和有效的)不能很容易地应用。那么,一个可能的解决方案是实现一个事件,在模态对话框消失后不久触发对模态背景的单击。
下面是一个基于以下模态对话框的例子:
<div class="modal fade ..." id="IdOfMyModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
...
</div>
要在点击模态时删除“modal- background in”(在屏幕上创建背景不透明),添加以下代码:
$('#IdOfMyModal').on("click", function() {
setTimeout(function() {
if ($('#IdOfMyModal').css("opacity") != "1")
$('.modal-backdrop').trigger('click');
}, 100);
});