我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
这个问题也会发生,如果你隐藏,然后再次显示模式窗口太快。这一点在其他地方提到过,但我将在下面提供更多细节。
这个问题与时间和渐变过渡有关。如果你在前一个模式的淡出过渡完成之前显示了一个模式,你会看到这个持续的背景问题(模式背景会以你的方式留在屏幕上)。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
其他回答
//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
$('body').append(myModalBackup.clone());
myModalBackup = null;
});
//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');
myModalBackup.modal('show');
提琴——> https://jsfiddle.net/o6th7t1x/4/
我正在和流星一起工作,我也遇到了同样的问题。我的bug的原因是:
{{#if tourmanager}}
{{>contactInformation tourmanager}}
{{else}}
<a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
{{>addArtistTourmanagerModal}}
{{/if}}
正如你所看到的,我在else中添加了模态,所以当我的模态更新联系人信息时,if有另一个状态。这导致模态模板在DOM即将关闭之前被排除在外。
解决方案:将模态移出if-else:
{{#if tourmanager}}
{{>contactInformation tourmanager}}
{{else}}
<a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
{{>addArtistTourmanagerModal}}
{{/if}}
在模式中的任何按钮上添加data-dismiss="modal"对我来说都很有效。我想让我的按钮调用angular函数来触发ajax调用并关闭模态,所以我在函数中添加了.toggle(),它工作得很好。(在我的情况下,我使用了一个bootstrap模态和使用一些角,而不是一个实际的模态控制器)。
<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>
$scope.functionName = function () {
angular.element('#modalId').toggle();
$.ajax({ ajax call })
}
这个问题也会发生,如果你隐藏,然后再次显示模式窗口太快。这一点在其他地方提到过,但我将在下面提供更多细节。
这个问题与时间和渐变过渡有关。如果你在前一个模式的淡出过渡完成之前显示了一个模式,你会看到这个持续的背景问题(模式背景会以你的方式留在屏幕上)。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
最近我遇到了这个问题,这里提供的解决方案都没有帮助我。或者它完全摧毁了它,所以它不能再播放。 在文档准备也没有工作,但工作的是,我包装我所有的监听器与立即调用的函数,像这样:
$(function () {
$('#btn-show-modal').click(function () {
$("#modal-lightbox").modal('show');
});
$('#btn-close-modal').click(function () {
$("#modal-lightbox").modal('hide');
});
});