我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
我也遇到过类似的问题。我将Boostrap与Backbone结合使用,我捕捉到点击“Do it”按钮,然后停止这些事件的传播。奇怪的是,这让模态消失了,但背景却没有。如果我调用event.preventDefault(),但不调用stopPropagation(),这一切都很好。
其他回答
如果您正在使用从getboostrap站点本身复制并粘贴到html生成的选择器中,请确保您删除了注释'<!——/。模态——>”。Bootstrap会感到困惑,认为注释是第二个模态元素。它为这个“第二个”元素创建了另一个背景。
从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 })
}
甚至我也遇到了类似的问题,我有以下两个按钮
<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>
我想执行一些ajax操作和成功的ajax操作关闭模式。这就是我所做的。
$.ajax({
url: '/ABC/Delete/' + self.model.get("Id")
, type: 'DELETE'
, success: function () {
setTimeout(function () {
self.$("#confirm-delete-cancel").trigger("click");
}, 1200);
}
, error: function () {}
});
我触发了“No”按钮的点击事件,该按钮具有data-dismiss="modal"属性。这是有效的:)
我正在和流星一起工作,我也遇到了同样的问题。我的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}}