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

我该怎么办?


当前回答

在ASP。,在UpdatePanel后面的代码上添加一个更新 jquery命令。例子:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();

其他回答

在考虑了所有的答案之后,我想出了一个包罗万象的解决方案。 最终,这是唯一对我有用的方法。 (香草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");\

确保对$.modal()的初始调用以应用模态行为没有传入比预期更多的元素。如果发生这种情况,它将为集合中的每个元素创建一个带有背景元素的模态实例。因此,它可能看起来像是背景被留下了,而实际上你正在看的是其中一个复制品。

在我的例子中,我试图用这样的代码创建模式内容:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

在这里,结束</div>标记之后的HTML注释意味着myModal实际上是两个元素的jQuery集合——div和注释。他们都尽职地变成情态动词,每个都有自己的背景元素。当然,由注释组成的模态在背景之外是不可见的,所以当我关闭真正的模态(div)时,它看起来就像背景被留下了一样。

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

我也有同样的问题。

然而,我使用bootbox.js,所以这可能是与此有关。

不管怎样,我意识到这个问题是由一个元素与它的父类具有相同的类引起的。当其中一个元素被用来绑定一个点击函数来显示模态时,就会出现问题。

这就是问题的原因:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

更改它,以便被点击的元素不具有与其父类、任何子类或任何其他父类相同的类。通常在绑定单击函数时这样做可能是一个很好的实践。

这行代码在许多搜索后解决了我的问题,我想关闭ajax成功的模式:

$('#exampleModal').modal('hide');
$("[data-dismiss=modal]").trigger({ type: "click" });

非常感谢,曼纽尔·费尔南多 https://stackoverflow.com/a/27218322/5935763