我有模态背景屏幕冻结的问题，但在一个略有不同的场景:当2个背靠背的模态正在显示。例:第一个模式会要求确认做某事，点击“确认”按钮后，动作会遇到错误，第二个模式将显示弹出错误消息。第二模态背景会冻结屏幕。 元素的类名或id没有冲突。

解决这个问题的方法是给浏览器足够的时间来处理模式背景。而不是在点击“确认”后立即采取行动，给浏览器500ms来隐藏第一个模式和清理背景等-然后采取行动，最终显示错误模式。

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

_dialogConfirmed()函数的代码如下:

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

我猜其他解决方案之所以有效，是因为它们花费了足够的额外时间，让浏览器有足够的清理时间。

我只是在这个问题上花了太多时间:)

虽然提供的其他答案是有帮助的和有效的，但对我来说，从Bootstrap有效地重新创建模态隐藏功能似乎有点混乱，所以我找到了一个更干净的解决方案。

问题是，当你打电话时，会发生一连串的事件

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

然后，当您替换AJAX请求的结果一堆HTML时，模式隐藏事件不会结束。然而，Bootstrap在一切完成时触发一个事件，你可以像这样钩入:

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

希望这对你有帮助!

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

这个解决方案适用于Ruby on Rails 3。X和一个js。erb文件重建部分DOM，包括模态。不管ajax调用是来自模态还是来自页面的不同部分，它都能正常工作。

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

感谢@BillHuertas的出发点。

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

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

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

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

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