我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
这个问题的另一个观点。 (我使用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"特性。
如果你遇到和我一样的问题,希望这能对你有所帮助。
其他回答
确保在执行AJAX请求时没有替换包含实际模态窗口的容器,因为Bootstrap在尝试关闭它时将无法找到对它的引用。在Ajax完整处理程序中删除模态,然后替换数据。
如果这不起作用,你可以通过以下方法强迫它消失:
$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
我有模态背景屏幕冻结的问题,但在一个略有不同的场景:当2个背靠背的模态正在显示。例:第一个模式会要求确认做某事,点击“确认”按钮后,动作会遇到错误,第二个模式将显示弹出错误消息。第二模态背景会冻结屏幕。 元素的类名或id没有冲突。
解决这个问题的方法是给浏览器足够的时间来处理模式背景。而不是在点击“确认”后立即采取行动,给浏览器500ms来隐藏第一个模式和清理背景等-然后采取行动,最终显示错误模式。
<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...
_dialogConfirmed()函数的代码如下:
var that = this;
setTimeout(function () {
if (that.confirmAction) {
(that.confirmAction)();
that.confirmAction = undefined;
}
}, 500);
我猜其他解决方案之所以有效,是因为它们花费了足够的额外时间,让浏览器有足够的清理时间。
在应用了最高评级的解决方案后,我有一个问题,它打破了将来情态动词正确打开。我已经找到了我的解决方法
element.on("shown.bs.modal", function () {
if ($(".modal-backdrop").length > 1) {
$(".modal-backdrop").not(':first').remove();
}
element.css('display', 'block');
});
这个问题的另一个观点。 (我使用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"特性。
如果你遇到和我一样的问题,希望这能对你有所帮助。
最近我遇到了这个问题,这里提供的解决方案都没有帮助我。或者它完全摧毁了它,所以它不能再播放。 在文档准备也没有工作,但工作的是,我包装我所有的监听器与立即调用的函数,像这样:
$(function () {
$('#btn-show-modal').click(function () {
$("#modal-lightbox").modal('show');
});
$('#btn-close-modal').click(function () {
$("#modal-lightbox").modal('hide');
});
});