$modalInstance 对话框关闭，但屏幕仍然灰显且无法访问答案

【问题标题】：$modalInstance dialog box closes, but screen remains grayed out and inaccessible$modalInstance 对话框关闭，但屏幕仍然灰显且无法访问
【发布时间】：2015-06-04 20:22:24
【问题描述】：

我正在使用 angular-ui 来打开和关闭模式。当我用submit(object) 或dismiss(message) 关闭它时，对话框关闭，但屏幕仍然灰显，我无法访问我的应用程序。一些代码：

父控制器（相关部分）：

$scope.deleteConfirm = function(toDelete) {

console.log(toDelete);

var modalObj = {
  templateUrl: 'views/templates/delete.html',
  controller: 'DeleteCtrl',
  size: 'sm',
  resolve: {
    toDelete: function() {
      return toDelete;
    },
    collection: function() {
      return $scope.users;
    }
  }
}

var modalInstance = $modal.open(modalObj);

modalInstance.result.then(function (deletedItem) {
  console.log(deletedItem);
});

};

父 html：

<button class="btn btn-danger btn-xs" ng-click="deleteConfirm(user)">X</button>

模态控制器：

.controller('DeleteCtrl', ['$scope', '$modalInstance', 'toDelete', 'collection', function ($scope, $modalInstance, toDelete, collection) {

$scope.toDelete = toDelete;

$scope.remove = function() {
    collection.$remove(toDelete).then(function(ref) {
        $modalInstance.close(ref);
    });
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

}]);

模态模板：

<div class = "ll-modal">
<div class="modal-header">
<h3 class="modal-title">Confirm Delete</h3>
</div>
<div class="modal-body">
    Are you sure you want to delete this item? It will be gone forever.
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="remove()">Delete Permanently</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

【问题讨论】：

什么版本的角度和引导程序？你也在使用 ngAnmate 吗？
Angular 1.4，angular-bootstrap 0.12，我现在将 ngAnimate 设置为 false，正如你所建议的那样
酷...或回退到 1.3.x
Angular Bootstrap Modal leaves backdrop open的可能重复

标签： angularjs modal-dialog angular-ui-bootstrap

【解决方案1】：

当模态与 ng-animate 的 1.4.x 角度版本一起使用时，似乎存在问题。由于ng-animate 仅在转换完成后才懒惰地删除 DOM 元素，因此该流程中有一些中断。您可以通过在模态设置中关闭动画来快速修复它。有一个问题 logged in Github 表示 1.4.x 尚未完全支持 ui bootstrap。

var modalObj = {
  templateUrl: 'views/templates/delete.html',
  controller: 'DeleteCtrl',
  size: 'sm',
  animation: false, //<-- Turn off
  resolve: {
    toDelete: function() {
      return toDelete;
    },
    collection: function() {
      return $scope.users;
    }
  }
}

或者只是全局关闭它：

app.config(function($modalProvider) {
  $modalProvider.options.animation = false;
});

更新

如果您按照上面提供的 github 链接，您可以看到它已在最新版本的 ui bootstrap 中修复，即upgrade of 0.13.3 或更高版本将解决此问题。

【讨论】：

【解决方案2】：

您现在可以将 Angular 1.4.x 与 Bootstrap UI 0.13.3 一起使用，问题已解决。这是依赖关系：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>

【讨论】：

【解决方案3】：

我正在使用 angular 1.4.3 angualar-ui-bootstrap 0.13 并且遇到了问题。

PSL 答案有效（删除了动画）...但没有动画会导致糟糕的用户体验（恕我直言）。

由于各种原因，无法将 angular 恢复为 1.3。

我尝试将 ui-bootstrap 从 0.13 降级到 0.12.1 它对我有用

我知道 ui-bootstrap 0.12.1 仅支持 angular 1.3...但是对于 angular 1.4.3，一切似乎都适用。鉴于我没有广泛使用 ui-bootstrap，我想这没关系，但这可能并不适合所有人

【讨论】：

【解决方案4】：

这是我对此的快速解决方案，在您的模态 html 中粘贴即可；

<script>
$(document).ready(function () {
    $("button.close").click(function () {
        $(".modal-backdrop.fade").hide();
    });
}); </script>

【讨论】：