Estoy usando AngularUI para integrar los componentes de Bootstrap en mi Angulares 1.4 aplicación, tales como los verbos Modales.

Voy a llamar a un Modal en mi controlador así:

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

Por desgracia, cuando quiero cerrar el Modal mediante el uso de:

modalInstance.close();

El modal sí mismo desaparece, y el telón de fondo también se desvanece, pero no es removido desde el DOM, por lo que se superpone a la totalidad de la página de salir de la página no responde.

Cuando me inspeccionar, estoy viendo esto:

Angular Modal de Bootstrap hojas telón de fondo abierto

En el ejemplo de la Documentación en https://angular-ui.github.io/bootstrap/#/modal La clase modal-open es eliminado del cuerpo y toda la modal-backdropse retira de la DOM en cerrar.
¿Por qué es el Modal desvaneciéndose, pero el telón de fondo no se quitan de la DOM en mi ejemplo?

Lo he comprobado en muchas de las otras preguntas sobre el telón de fondo de bootstrap Modales, pero me parece que no puede averiguar lo que está mal.

  • ¿usted está consiguiendo ningún error en la consola ?
  • Ninguno… parece que todo está funcionando como el modal y el telón de fondo de fundido de salida. Pero entonces el telón de fondo solo queda ahí….
  • Al parecer, esto es debido a un error. AngularUI no soporte Angular 1.4 todavía. La grabación de este para la posteridad: github.com/angular-ui/bootstrap/issues/3620
  • El uso de Angulares de la interfaz de usuario 0.13.1 con Angular 1.4.x ha resuelto este problema. Angular de la interfaz de usuario 0.13.0 presenta este error.
InformationsquelleAutor Squrler | 2015-05-12

6 Comentarios

  1. 18

    Al parecer, esto es debido a un error. AngularUI no soporte Angular 1.4 todavía. Una vez http://github.com/angular-ui/bootstrap/issues/3620 se resuelve esto va a funcionar.

    • Muchas gracias… el problema no está resuelto todavía, pero desactivando las animaciones el telón de fondo se elimina, por lo que funciona como evitar, al menos por ahora.
    • El problema fue migrado a github.com/angular-ui/bootstrap/issues/3633
    • El uso de Angulares de la interfaz de usuario 0.13.1 con Angular 1.4.x ha resuelto este problema. Angular de la interfaz de usuario 0.13.0 presenta este error.
  2. 5

    Hasta que el equipo se esta clasifican aquí es un trabajo de alrededor.

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

    Por desgracia, parece que el equipo no está en la misma página con respecto a este tema ya que fue empujado a un subproceso independiente por parte de un colaborador y, a continuación, el hilo se fue empujado a fue cerrado por el otro ya que se considera «fuera de tema» por otro.

    • Me han confirmado la veracidad de la declaración que se encuentra en la parte inferior de github problema 3633: «Esto parece estar trabajando ahora con angular 1.4.3 y angular-bootstrap 0.13.1.»
  3. 2

    Simplemente se puede hacer como esta, cierre primero el modal u han abierto

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

    básicamente id de modal Segundo esta a quitar si cualquier

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

    por último para cerrar el telón de fondo

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

    Estoy usando Angular versión 1.3.13 y tienen un problema similar. He estado investigando el problema, y creo que este error se extiende desde angular versión 1.3.13 para 1.4.1 detalles aquí https://github.com/angular-ui/bootstrap/pull/3400

    Y si se desplaza a la parte inferior de ese enlace podrás ver un post de fernandojunior mostrando las versiones que probado y mejorado, sigue mostrando el mismo problema. Incluso se creó una plnker para simular el problema http://plnkr.co/edit/xQOL58HDXTuvSDsHRbra y he simulado el problema en el siguiente fragmento de código utilizando el Angular-interfaz de usuario modal código de ejemplo.

    JS:

    //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');
    };
    });

    HTML:

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

  5. 0
    <button type="button" class="close" onclick="$('.modal-backdrop').remove();"
    data-dismiss="modal">
    $(document).keypress(function(e) { 
    if (e.keyCode == 27) { 
    $('.modal-backdrop').remove();
    } 
    });
    • Gracias por este fragmento de código, que podría proporcionar algunos a corto plazo limitado de ayuda. Una explicación adecuada , mejoraría mucho su valor de largo plazo, mostrando a la porque esta es una buena solución para el problema y que sea más útil para los lectores futuros con otras preguntas similares. Por favor, editar su respuesta a añadir alguna explicación, incluyendo las suposiciones que hemos hecho.
  6. -1

    También estoy usando Angular 1.3.0 y yo también soy de usar interfaz de usuario bootstrap-tpls-0.11.2 y por alguna razón mi problema estaba sucediendo cuando yo estaba redireccionando a la nueva página y el telón de fondo era que todavía muestra, así que terminé de agregar este código…

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

    que en realidad se encuentran aquí….
    Ocultar Bootstrap 3 Modal & AngularJS redirect ($ubicación.ruta de acceso)

Dejar respuesta

Please enter your comment!
Please enter your name here