angularjs - tabset - Angular Bootstrap Modal hojas telón de fondo abierto
ngbtypeahead (6)
Estoy usando AngularUI para integrar los componentes de Bootstrap en mi aplicación Angular 1.4, como los Modales.
Estoy llamando a un Modal en mi controlador así:
var modalInstance = $modal.open({
animation: true,
templateUrl: ''/static/templates/support-report-modal.html'',
controller: ''ModalInstanceCtrl''
});
Desafortunadamente, cuando quiero cerrar el Modal usando:
modalInstance.close();
El modal en sí desaparece, y el fondo también se desvanece, pero no se elimina del DOM, por lo que se superpone a toda la página dejando la página sin responder.
Cuando inspecciono, estoy viendo esto:
En el ejemplo de la Documentación en https://angular-ui.github.io/bootstrap/#/modal la clase modal-open se elimina del cuerpo y todo el modal-backdrop se elimina del DOM al cerrarse. ¿Por qué se desvanece el Modal pero no se elimina el telón de fondo del DOM en mi ejemplo?
He comprobado muchas de las otras preguntas sobre el telón de fondo de los Modales bootstrap, pero parece que no puedo entender qué está mal.
Esto es aparentemente debido a un error. AngularUI no soporta Angular 1.4 todavía. Una vez que se haya resuelto http://github.com/angular-ui/bootstrap/issues/3620 , esto funcionará.
Estoy usando la versión 1.3.13 de Angular y tengo un problema similar. He estado investigando el problema y creo que este error se extiende desde la versión angular 1.3.13 a la 1.4.1. Detalles aquí https://github.com/angular-ui/bootstrap/pull/3400
Y si se desplaza hasta la parte inferior de ese enlace, verá una publicación de fernandojunior que muestra las versiones que probó y actualizó para que aún muestren el mismo problema. Incluso creó un plnker para simular el problema http://plnkr.co/edit/xQOL58HDXTuvSDsHRbra y simulé el problema en el fragmento de código a continuación usando el ejemplo del código 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>
Hasta que el equipo se resuelva, aquí hay un problema.
<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();
});
}
};
}]);
}());
Desafortunadamente, parece que el equipo no se encuentra en la misma página con respecto a este problema, ya que un colaborador lo empujó a un hilo diferente y luego el hilo al que fue empujado fue cerrado por otro ya que fue considerado "fuera de tema" por otro.
Simplemente puede hacer esto, primero cierre el modal que ha abierto.
$(''#nameOfModal'').modal(''hide'');
básicamente id de modal Segundo esto para eliminar si hay alguno
$(''body'').removeClass(''modal-open'');
por último para cerrar el telón de fondo
$(''.modal-backdrop'').remove();
También estoy usando Angular 1.3.0 y también estoy usando la interfaz de usuario bootstrap-tpls-0.11.2 y, por alguna razón, mi problema estaba ocurriendo cuando estaba redirigiendo a la nueva página y el fondo seguía apareciendo, así que terminé agregando esto. código...
.then(function () {
$("#delete").on(''hidden.bs.modal'', function () {
$scope.$apply();
})
});
que encontré aquí ... Ocultar Bootstrap 3 Modal & AngularJS redirect ($ location.path)
<button type="button" class="close" onclick="$(''.modal-backdrop'').remove();"
data-dismiss="modal">
$(document).keypress(function(e) {
if (e.keyCode == 27) {
$(''.modal-backdrop'').remove();
}
});