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

我该怎么办?


当前回答

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

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

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

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

其他回答

updatepanel issue。

我的问题是由于更新面板的位置。我在更新面板上有整个模式。如果你在更新面板之外声明了模态在更新面板中只有模态主体,那么 $ (' # myModalID ') .modal(隐藏的); 工作。

我只是在这个问题上花了太多时间:)

虽然提供的其他答案是有帮助的和有效的,但对我来说,从Bootstrap有效地重新创建模态隐藏功能似乎有点混乱,所以我找到了一个更干净的解决方案。

问题是,当你打电话时,会发生一连串的事件

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

然后,当您替换AJAX请求的结果一堆HTML时,模式隐藏事件不会结束。然而,Bootstrap在一切完成时触发一个事件,你可以像这样钩入:

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

希望这对你有帮助!

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

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

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

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

我也遇到过类似的问题:在我的模式窗口中,我有两个按钮,“取消”和“确定”。最初,这两个按钮都将通过调用$('#myModal').modal('hide')来关闭模式窗口(前面有"OK"执行一些代码),场景如下:

打开模态窗口 做一些操作,然后点击“确定”是否验证他们并关闭模式 再次打开模态并通过点击“取消”来取消 重新打开模式,再次点击“取消”==>背景不再可访问!

好吧,我旁边的同事帮了我大忙:不用调用$('#myModal').modal('hide'),而是给你的按钮赋予data-dismiss="modal"属性,并在你的"Submit"按钮中添加一个"click"事件。在我的问题中,按钮的HTML(好吧,TWIG)代码是:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

在我的JavaScript代码,我有:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

而没有“点击”事件归因于“取消”按钮。模态现在正确关闭,让我再次使用“正常”页面。实际上,似乎data-dismiss="modal"应该是指示按钮(或任何DOM元素)应该关闭Bootstrap模式的唯一方法。modal('hide')方法的行为似乎不太可控。

希望这能有所帮助!

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

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

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