我正在使用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"属性。这是有效的:)
其他回答
我在提交表单时也遇到了同样的问题。解决方案是将按钮类型从submit更改为button,然后处理按钮单击事件,如下所示:
'click .js-save-modal' () {
$('#myFormId').submit();
$('#myModalId').modal('hide');
}
最近我遇到了这个问题,这里提供的解决方案都没有帮助我。或者它完全摧毁了它,所以它不能再播放。 在文档准备也没有工作,但工作的是,我包装我所有的监听器与立即调用的函数,像这样:
$(function () {
$('#btn-show-modal').click(function () {
$("#modal-lightbox").modal('show');
});
$('#btn-close-modal').click(function () {
$("#modal-lightbox").modal('hide');
});
});
在考虑了所有的答案之后,我想出了一个包罗万象的解决方案。 最终,这是唯一对我有用的方法。 (香草javascript):
var elem = document.querySelectorAll('[data-dismiss="modal"]')[0];
var evt = new Event('click');
elem.dispatchEvent(evt);
var modalelem = document.getElementById('exampleModalCenter');
var myModal = new bootstrap.Modal(modalelem, { keyboard: false })
const fade = modalelem.classList.contains('fade');
if (fade) {
modalelem.classList.remove('fade');
}
myModal.hide();
myModal.dispose();
var backdrop = document.getElementsByClassName('modal-backdrop')[0];
backdrop.style.display = 'none';
var modalopen = document.getElementsByClassName('modal-open')[0];
modalopen.classList.remove('modal-open');
modalopen.style.removeProperty("overflow");\
数据背景属性的初始值可以是
“静态”、“真”、“假”。
Static和true添加模态阴影,而false禁用阴影,所以你只需要在第一次点击时将这个值更改为false。是这样的:
$(文档)。(“准备好”,函数(){ var计算= 0; $ (' # id-which-triggers-modal ')。(“点击”,函数(){ 如果(数> 0){ (美元).attr(“data-backdrop”,“假”) } 数+ +; }); });
另一个可能导致这个问题的错误,
确保你没有在页面中不止一次地包含bootstrap.js脚本!