我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
供你参考,如果有人遇到这种情况……我花了大约3个小时发现最好的方法如下:
$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");
关闭模态的函数非常不直观。
其他回答
这个问题的另一个观点。 (我使用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"特性。
如果你遇到和我一样的问题,希望这能对你有所帮助。
这个问题也会发生,如果你隐藏,然后再次显示模式窗口太快。这一点在其他地方提到过,但我将在下面提供更多细节。
这个问题与时间和渐变过渡有关。如果你在前一个模式的淡出过渡完成之前显示了一个模式,你会看到这个持续的背景问题(模式背景会以你的方式留在屏幕上)。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
这行代码在许多搜索后解决了我的问题,我想关闭ajax成功的模式:
$('#exampleModal').modal('hide');
$("[data-dismiss=modal]").trigger({ type: "click" });
非常感谢,曼纽尔·费尔南多 https://stackoverflow.com/a/27218322/5935763
模式(’hide’)
手动隐藏模式。在modal实际被隐藏之前(即在hidden.bs.modal事件发生之前)返回给调用者。
所以与其
$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');
do
$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
$('#someOtherSelector').trigger('click');
});
因此,您一定要等到“hide”事件完成。
我在提交表单时也遇到了同样的问题。解决方案是将按钮类型从submit更改为button,然后处理按钮单击事件,如下所示:
'click .js-save-modal' () {
$('#myFormId').submit();
$('#myModalId').modal('hide');
}