我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
我也有同样的问题。我发现这是由于Bootstrap和JQueryUI之间的冲突。
两者都使用“close”类。改变其中一个类可以解决这个问题。
其他回答
//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}}
最近我遇到了这个问题,这里提供的解决方案都没有帮助我。或者它完全摧毁了它,所以它不能再播放。 在文档准备也没有工作,但工作的是,我包装我所有的监听器与立即调用的函数,像这样:
$(function () {
$('#btn-show-modal').click(function () {
$("#modal-lightbox").modal('show');
});
$('#btn-close-modal').click(function () {
$("#modal-lightbox").modal('hide');
});
});
从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');
}
在模式中的任何按钮上添加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 })
}