我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在

我该怎么办?


当前回答

这个解决方案适用于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的出发点。

其他回答

$ (' # myModal ') .trigger(“点击”);

这对我很管用。它没有关闭,因为当你打开弹出窗口时,它会触发2或3个模式背景。当你执行$('#myModal')).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");\

确保在执行AJAX请求时没有替换包含实际模态窗口的容器,因为Bootstrap在尝试关闭它时将无法找到对它的引用。在Ajax完整处理程序中删除模态,然后替换数据。

如果这不起作用,你可以通过以下方法强迫它消失:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

从https://github.com/twbs/bootstrap/issues/19385

Modal的显示/隐藏方法是异步的。因此,代码如下: foo.modal(“隐藏”);bar.modal(“秀”);是无效的。你需要等待 实际完成的显示/隐藏(通过侦听 显示/隐藏事件;看到 http://getbootstrap.com/javascript/#modals-events) 再次显示或隐藏方法。

我有这个问题时,我打开相同的模式两次太快,所以一个简单的解决方法是检查它是否已经显示,然后不显示它再次:

$('#modalTitle').text(...);
$('#modalMessage').text(...);
if($('#messageModal').is(':hidden')){
    $('#messageModal').modal('show');
}

在。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”);