webentwicklung-frage-antwort-db.com.de

Angular Bootstrap Modal lässt den Hintergrund offen

Ich verwende AngularUI, um Bootstrap-Komponenten in meine Angular 1.4-App wie Modals zu integrieren. 

Ich rufe einen Modal in meinem Controller an:

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

Leider, wenn ich den Modal mit folgendem schließen möchte:

modalInstance.close();

Das Modal selbst verschwindet und der Hintergrund wird ebenfalls ausgeblendet, aber es wird nicht aus dem DOM entfernt. Es wird also die gesamte Seite überlagert, sodass die Seite nicht reagiert.

Wenn ich inspiziere, sehe ich Folgendes:

enter image description here

In dem Beispiel in der Dokumentation unter https://angular-ui.github.io/bootstrap/#/modal wird die Klasse modal-open aus dem Body entfernt und der gesamte modal-backdrop wird beim Schließen aus dem DOM entfernt. Warum wird der Modal ausgeblendet, aber die Kulisse in meinem Beispiel nicht aus dem DOM entfernt?

Ich habe viele andere Fragen zum Hintergrund von Bootstrap Modals geprüft, aber ich kann nicht herausfinden, was schief läuft.

24
Squrler

Dies ist offensichtlich auf einen Fehler zurückzuführen. AngularUI unterstützt Angular 1.4 noch nicht. Sobald http://github.com/angular-ui/bootstrap/issues/3620 behoben ist, wird dies funktionieren.

18
Squrler

Bis das Team das hier sortiert bekommt, ist eine Problemumgehung. 

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

Leider scheint sich das Team in Bezug auf dieses Problem nicht auf der gleichen Seite zu befinden, da es von einem Beitragenden in einen separaten Thread verschoben wurde. Dann wurde der Thread, zu dem es verschoben wurde, von einem anderen geschlossen, da es von einem anderen als "off topic" betrachtet wurde.

5
tuckerjt07

Sie können dies einfach tun, indem Sie zuerst das geöffnete Modal schließen

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

im Grunde id von modal Zweitens zu entfernen, falls vorhanden

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

zum Schluss den Hintergrund schließen

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

Ich verwende Angular Version 1.3.13 und habe ein ähnliches Problem. Ich habe das Problem untersucht und glaube, dass sich dieser Fehler von der Winkelversion 1.3.13 bis 1.4.1 erstreckt. Details hier https://github.com/angular-ui/bootstrap/pull/3400

Und wenn Sie bis zum Ende dieses Links blättern, sehen Sie einen Beitrag von fernandojunior, der die Versionen zeigt, die er getestet und auf das gleiche Problem aktualisiert hat. Er hat sogar einen Planer erstellt, um das Problem zu simulieren http://plnkr.co/edit/xQOL58HDXTuvSDsHRbra und ich habe das Problem im folgenden Codeausschnitt anhand des Beispielmodells für Angular-UI simuliert.

// 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