这个解决方案适用于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的出发点。

确保对$.modal()的初始调用以应用模态行为没有传入比预期更多的元素。如果发生这种情况，它将为集合中的每个元素创建一个带有背景元素的模态实例。因此，它可能看起来像是背景被留下了，而实际上你正在看的是其中一个复制品。

在我的例子中，我试图用这样的代码创建模式内容:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

在这里，结束</div>标记之后的HTML注释意味着myModal实际上是两个元素的jQuery集合——div和注释。他们都尽职地变成情态动词，每个都有自己的背景元素。当然，由注释组成的模态在背景之外是不可见的，所以当我关闭真正的模态(div)时，它看起来就像背景被留下了一样。

甚至我也遇到了类似的问题，我有以下两个按钮

<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"属性。这是有效的:)

试试这个

$('#something_clickable').on('click', function () {
  $("#my_modal").modal("hide");
  $("body").removeClass("modal-open");
  $('.modal-backdrop').remove();
 });

这对我来说很有效。

我有模态背景屏幕冻结的问题，但在一个略有不同的场景:当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);

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

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