我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
甚至我也遇到了类似的问题,我有以下两个按钮
<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>
我想执行一些ajax操作和成功的ajax操作关闭模式。这就是我所做的。
$.ajax({
url: '/ABC/Delete/' + self.model.get("Id")
, type: 'DELETE'
, success: function () {
setTimeout(function () {
self.$("#confirm-delete-cancel").trigger("click");
}, 1200);
}
, error: function () {}
});
我触发了“No”按钮的点击事件,该按钮具有data-dismiss="modal"属性。这是有效的:)
其他回答
有些情况下,其他答案(有帮助的和有效的)不能很容易地应用。那么,一个可能的解决方案是实现一个事件,在模态对话框消失后不久触发对模态背景的单击。
下面是一个基于以下模态对话框的例子:
<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);
});
我也遇到过类似的问题。我将Boostrap与Backbone结合使用,我捕捉到点击“Do it”按钮,然后停止这些事件的传播。奇怪的是,这让模态消失了,但背景却没有。如果我调用event.preventDefault(),但不调用stopPropagation(),这一切都很好。
这个解决方案适用于Ruby on Rails 3。X和一个js。erb文件重建部分DOM,包括模态。不管ajax调用是来自模态还是来自页面的不同部分,它都能正常工作。
if ($("#my-modal").attr("aria-hidden") === "false") {
$("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
functionThatEndsUpDestroyingTheDOM();
});
} else {
functionThatEndsUpDestroyingTheDOM();
}
感谢@BillHuertas的出发点。
我有模态背景屏幕冻结的问题,但在一个略有不同的场景:当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);
我猜其他解决方案之所以有效,是因为它们花费了足够的额外时间,让浏览器有足够的清理时间。
use:
$('.modal.in').modal('hide')
源