在应用了最高评级的解决方案后，我有一个问题，它打破了将来情态动词正确打开。我已经找到了我的解决方法

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

在模式中的任何按钮上添加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

确保在执行AJAX请求时没有替换包含实际模态窗口的容器，因为Bootstrap在尝试关闭它时将无法找到对它的引用。在Ajax完整处理程序中删除模态，然后替换数据。

如果这不起作用，你可以通过以下方法强迫它消失:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

确保你没有在其他地方使用相同的元素Id /类，对于一个与模态组件无关的元素。

这是. .如果你使用类名myModal来标识触发模式弹出窗口的按钮，请确保没有具有相同类名的不相关元素。

我也有同样的问题。我发现这是由于Bootstrap和JQueryUI之间的冲突。

两者都使用“close”类。改变其中一个类可以解决这个问题。