Angular Bootstrap 模式使背景保持打开状态

Question

我正在使用 AngularUI 将 Bootstrap 组件集成到我的 Angular 1.4 应用程序中，例如模态框。

我像这样在我的控制器中调用模态：

var modalInstance = $modal.open({
  animation: true,
  templateUrl: '/static/templates/support-report-modal.html',
  controller: 'ModalInstanceCtrl'
});

不幸的是，当我想使用以下方式关闭模式时：

modalInstance.close();

模态框本身消失了，背景也淡出，但它没有从 DOM 中移除，所以它覆盖了整个页面，使页面无响应。

当我检查时，我看到了这个：

在 https://angular-ui.github.io/bootstrap/#/modal 文档中的示例中 class modal-open 从正文中删除，整个 modal-backdrop 从 DOM 中删除关。在我的示例中，为什么模态框淡出但背景没有从 DOM 中移除？

我已经检查了很多关于 bootstrap 模态背景的其他问题，但我似乎无法弄清楚出了什么问题。

Answer 1

这显然是一个错误。 AngularUI 还不支持 Angular 1.4。一旦 http://github.com/angular-ui/bootstrap/issues/3620 得到解决，这将起作用。

Answer 2

我正在使用 Angular 版本 1.3.13 并且遇到了类似的问题。我一直在研究这个问题，相信这个错误从 angular 版本 1.3.13 扩展到 1.4.1 详细信息在这里 https://github.com/angular-ui/bootstrap/pull/3400

如果您滚动到 link 的底部，您将看到 fernandojunior 的 post 显示他测试和升级的版本仍然显示相同的问题。他甚至创建了一个 plnker 来模拟问题 http://plnkr.co/edit/xQOL58HDXTuvSDsHRbra，我在下面的代码片段中使用 Angular-UI 模态代码示例模拟了这个问题。

// angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);

angular
  .module('ui.bootstrap.demo', [
    'ngAnimate',
    'ui.bootstrap',
  ]);

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

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

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <!-- angular 1.4.1 -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
    <!-- angular animate 1.4.1 -->
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-animate.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>
    <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
    <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
    <button class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>

Answer 3

在团队解决此问题之前，这里是一个变通办法。

<div class="modal-footer">
    <button class="btn btn-primary"
        ng-click="registerModal.ok()"
        remove-modal>OK</button>
    <button class="btn btn-warning"
        ng-click="registerModal.cancel()"
        remove-modal>Cancel</button>
</div>

/*global angular */
(function () {
'use strict';
angular.module('CorvetteClub.removemodal.directive', [])
.directive('removeModal', ['$document', function ($document) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                $document[0].body.classList.remove('modal-open');
                    angular.element($document[0].getElementsByClassName('modal-backdrop')).remove();
                    angular.element($document[0].getElementsByClassName('modal')).remove();
                });
            }
        };
    }]);
}());

不幸的是，关于这个问题，团队似乎不在同一个页面上，因为它被一个贡献者推送到一个单独的线程，然后它被推送到的线程被另一个人关闭，因为它被认为 "off topic" 另一个。

Answer 4

我也在使用 Angular 1.3.0 我也在使用 UI bootstrap-tpls-0.11.2 并且由于某种原因我在重定向时发生了问题到新页面并且背景仍在显示，所以我最终添加了这段代码...

    .then(function () {
        $("#delete").on('hidden.bs.modal', function () {
            $scope.$apply();
        })
    });

我实际上是在这里找到的.... Hide Bootstrap 3 Modal & AngularJS redirect ($location.path)

Answer 5

你可以这样做，首先关闭你打开的模态

 $('#nameOfModal').modal('hide');

基本上是模态第二个 id，如果有则删除

 $('body').removeClass('modal-open');

最后关闭背景

 $('.modal-backdrop').remove();

Answer 6

<button type="button" class="close" onclick="$('.modal-backdrop').remove();"
                                data-dismiss="modal">

$(document).keypress(function(e) { 
    if (e.keyCode == 27) { 
       $('.modal-backdrop').remove();
    } 
});

Answer 7

在您提交按钮或任何 button/selection 将您移动到另一个页面的按钮中，只需使用 data-dismiss="modal" 即可处理后退。它只是告诉您在做出选择后关闭模态。

Angular Bootstrap 模式使背景保持打开状态

Angular Bootstrap Modal leaves backdrop open

angularjs

angular-ui

angular-ui-bootstrap

bootstrap-modal