我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
use:
$('.modal.in').modal('hide')
源
其他回答
我也遇到过类似的问题:在我的模式窗口中,我有两个按钮,“取消”和“确定”。最初,这两个按钮都将通过调用$('#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')方法的行为似乎不太可控。
希望这能有所帮助!
确保对$.modal()的初始调用以应用模态行为没有传入比预期更多的元素。如果发生这种情况,它将为集合中的每个元素创建一个带有背景元素的模态实例。因此,它可能看起来像是背景被留下了,而实际上你正在看的是其中一个复制品。
在我的例子中,我试图用这样的代码创建模式内容:
myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();
在这里,结束</div>标记之后的HTML注释意味着myModal实际上是两个元素的jQuery集合——div和注释。他们都尽职地变成情态动词,每个都有自己的背景元素。当然,由注释组成的模态在背景之外是不可见的,所以当我关闭真正的模态(div)时,它看起来就像背景被留下了一样。
我有模态背景屏幕冻结的问题,但在一个略有不同的场景:当2个背靠背的模态正在显示。例:第一个模式会要求确认做某事,点击“确认”按钮后,动作会遇到错误,第二个模式将显示弹出错误消息。第二模态背景会冻结屏幕。 元素的类名或id没有冲突。
解决这个问题的方法是给浏览器足够的时间来处理模式背景。而不是在点击“确认”后立即采取行动,给浏览器500ms来隐藏第一个模式和清理背景等-然后采取行动,最终显示错误模式。
<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...
_dialogConfirmed()函数的代码如下:
var that = this;
setTimeout(function () {
if (that.confirmAction) {
(that.confirmAction)();
that.confirmAction = undefined;
}
}, 500);
我猜其他解决方案之所以有效,是因为它们花费了足够的额外时间,让浏览器有足够的清理时间。
在考虑了所有的答案之后,我想出了一个包罗万象的解决方案。 最终,这是唯一对我有用的方法。 (香草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");\
最近我遇到了这个问题,这里提供的解决方案都没有帮助我。或者它完全摧毁了它,所以它不能再播放。 在文档准备也没有工作,但工作的是,我包装我所有的监听器与立即调用的函数,像这样:
$(function () {
$('#btn-show-modal').click(function () {
$("#modal-lightbox").modal('show');
});
$('#btn-close-modal').click(function () {
$("#modal-lightbox").modal('hide');
});
});