我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
在考虑了所有的答案之后,我想出了一个包罗万象的解决方案。 最终,这是唯一对我有用的方法。 (香草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");\
其他回答
确保在执行AJAX请求时没有替换包含实际模态窗口的容器,因为Bootstrap在尝试关闭它时将无法找到对它的引用。在Ajax完整处理程序中删除模态,然后替换数据。
如果这不起作用,你可以通过以下方法强迫它消失:
$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
我也遇到过类似的问题。我将Boostrap与Backbone结合使用,我捕捉到点击“Do it”按钮,然后停止这些事件的传播。奇怪的是,这让模态消失了,但背景却没有。如果我调用event.preventDefault(),但不调用stopPropagation(),这一切都很好。
确保你没有在其他地方使用相同的元素Id /类,对于一个与模态组件无关的元素。
这是. .如果你使用类名myModal来标识触发模式弹出窗口的按钮,请确保没有具有相同类名的不相关元素。
//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
$('body').append(myModalBackup.clone());
myModalBackup = null;
});
//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');
myModalBackup.modal('show');
提琴——> https://jsfiddle.net/o6th7t1x/4/
在。net MVC4项目中,我在Ajax中有模态弹出(bootstrap 3.0)。BeginForm(OnComplete = "addComplete"[额外的代码删除])。在“addComplete”javascript中,我有以下代码。这解决了我的问题。
$('#moreLotDPModal').hide(); $(“#moreLotDPModal”).data('bs.modal').isDisplay= false; $('body').removeClass('modal-open'); $('.modal-backdrop').remove(); $('#moreLotDPModal').removeClass(“in”); $('#moreLotDPModal').attr('aria-hidden', “true”);