供你参考，如果有人遇到这种情况……我花了大约3个小时发现最好的方法如下:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

关闭模态的函数非常不直观。

我也有同样的问题。

然而，我使用bootbox.js，所以这可能是与此有关。

不管怎样，我意识到这个问题是由一个元素与它的父类具有相同的类引起的。当其中一个元素被用来绑定一个点击函数来显示模态时，就会出现问题。

这就是问题的原因:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

更改它，以便被点击的元素不具有与其父类、任何子类或任何其他父类相同的类。通常在绑定单击函数时这样做可能是一个很好的实践。

试试这个

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

这对我来说很有效。

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

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

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

我也遇到过类似的问题:在我的模式窗口中，我有两个按钮，“取消”和“确定”。最初，这两个按钮都将通过调用$('#myModal').modal('hide')来关闭模式窗口(前面有"OK"执行一些代码)，场景如下:

打开模态窗口 做一些操作，然后点击“确定”是否验证他们并关闭模式 再次打开模态并通过点击“取消”来取消 重新打开模式，再次点击“取消”==>背景不再可访问!

好吧，我旁边的同事帮了我大忙:不用调用$('#myModal').modal('hide')，而是给你的按钮赋予data-dismiss="modal"属性，并在你的"Submit"按钮中添加一个"click"事件。在我的问题中，按钮的HTML(好吧，TWIG)代码是:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

在我的JavaScript代码，我有:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

而没有“点击”事件归因于“取消”按钮。模态现在正确关闭，让我再次使用“正常”页面。实际上，似乎data-dismiss="modal"应该是指示按钮(或任何DOM元素)应该关闭Bootstrap模式的唯一方法。modal('hide')方法的行为似乎不太可控。

希望这能有所帮助!