我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
在ASP。,在UpdatePanel后面的代码上添加一个更新 jquery命令。例子:
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
upModal.Update();
其他回答
从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');
}
这个问题也会发生,如果你隐藏,然后再次显示模式窗口太快。这一点在其他地方提到过,但我将在下面提供更多细节。
这个问题与时间和渐变过渡有关。如果你在前一个模式的淡出过渡完成之前显示了一个模式,你会看到这个持续的背景问题(模式背景会以你的方式留在屏幕上)。Bootstrap显式地不支持多个同时的模态,但这似乎是一个问题,即使你隐藏的模态和你显示的模态是相同的。
如果这是你的问题的正确原因,这里有一些缓解问题的选择。选项#1是一个快速而简单的测试,可以确定渐隐过渡时间是否确实是问题的原因。
禁用模态的Fade动画(从对话框中删除Fade类) 更新模态的文本,而不是隐藏并重新显示它。 修正时间,使它不会显示模态,直到它完成隐藏前一个模态。使用模态的事件来做到这一点。http://getbootstrap.com/javascript/#modals-events
这里有一些相关的引导问题跟踪帖子。追踪者的帖子可能比我下面列出的要多。
https://github.com/twbs/bootstrap/issues/735 https://github.com/twbs/bootstrap/issues/2839 https://github.com/twbs/bootstrap/issues/19385
试试这个
$('#something_clickable').on('click', function () {
$("#my_modal").modal("hide");
$("body").removeClass("modal-open");
$('.modal-backdrop').remove();
});
这对我来说很有效。
模式(’hide’)
手动隐藏模式。在modal实际被隐藏之前(即在hidden.bs.modal事件发生之前)返回给调用者。
所以与其
$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');
do
$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
$('#someOtherSelector').trigger('click');
});
因此,您一定要等到“hide”事件完成。
这个问题的另一个观点。 (我使用bootstrap.js 3.3.6版本)
我错误地在javascript中手动初始化模态:
$('#myModal').modal({
keyboard: false
})
通过使用
模态数据-toggle = " "
在下面这个类似按钮的例子中(在文档中显示)
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
结果它创建了两个实例
<div class="modal-backdrop fade in"></div>
当打开模态时附加到我的HTML的主体。这可能是使用function关闭模态时的原因:
$('#myModal').modal('hide');
它只删除一个背景实例(如上所示),所以背景不会消失。但如果你使用data-dismiss="modal"在html上添加,它就会消失,就像bootstrap doc中显示的那样。
所以我的问题的解决方案是只初始化模式手动在javascript和不使用数据属性,这样我可以关闭模式手动和使用data-dismiss="modal"特性。
如果你遇到和我一样的问题,希望这能对你有所帮助。