web-dev-qa-db-fra.com

Angular Bootstrap Modal laisse le décor ouvert

J'utilise AngularUI pour intégrer des composants Bootstrap dans mon application Angular 1.4, tels que Modals. 

J'appelle un Modal dans mon contrôleur comme ceci:

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

Malheureusement, quand je veux fermer le Modal en utilisant:

modalInstance.close();

Le modal lui-même disparaît et la toile de fond disparaît également, mais elle n'est pas supprimée du DOM. Elle recouvre donc toute la page, ce qui la laisse inactive.

Quand j'inspecte, je vois ceci:

enter image description here

Dans l'exemple de la documentation sur https://angular-ui.github.io/bootstrap/#/modal la classe modal-open est supprimée du corps et l'ensemble modal-backdrop est supprimé du DOM à la fermeture. Pourquoi le modal s’affaiblit-il alors que la toile de fond n’est pas supprimée du DOM dans mon exemple?

J'ai vérifié de nombreuses autres questions sur le contexte des modaux bootstrap mais je n'arrive pas à comprendre ce qui ne va pas.

angularjsangular-uiangular-ui-bootstrapbootstrap-modal
24
Squrler

Ceci est apparemment dû à un bug. AngularUI ne supporte pas encore Angular 1.4. Une fois que http://github.com/angular-ui/bootstrap/issues/3620 est résolu, cela fonctionnera.

18
Squrler

Jusqu'à ce que l'équipe ait réglé ce problème, voici un moyen de contourner le problème. 

<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();
                });
            }
        };
    }]);
}());

Malheureusement, il semble que l'équipe ne soit pas sur la même page concernant ce problème, car un contributeur l'a inséré dans un fil distinct, puis le fil auquel il a été poussé a été fermé par un autre car considéré comme "hors sujet" par un autre.

5
tuckerjt07

Vous pouvez simplement faire comme ceci, d'abord fermer le modal que vous avez ouvert

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

fondamentalement id de modal Deuxième cela pour supprimer le cas échéant

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

enfin fermer la toile de fond

 $('.modal-backdrop').remove();
2
yogesh mhetre

J'utilise la version angulaire 1.3.13 et ai un problème similaire. Je fais des recherches sur le problème et je pense que ce bogue s’étend de la version angulaire 1.3.13 aux versions 1.4.1 ici https://github.com/angular-ui/bootstrap/pull/3400

Et si vous faites défiler l'écran en bas de ce lien, vous verrez un message de fernandojunior montrant les versions qu'il a testées et mises à niveau pour afficher le même problème. Il a même créé un administrateur pour simuler le problème http://plnkr.co/edit/xQOL58HDXTuvSDsHRbra et j'ai simulé le problème dans le fragment de code ci-dessous à l'aide de l'exemple de code modal 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>

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

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