Angular Bootstrap Modal lascia il fondale aperto

Sto usando AngularUI per integrare i componenti Bootstrap nella mia app Angular 1.4, come i Modals.Angular Bootstrap Modal lascia il fondale aperto

Sto chiamando un modale nel mio controller in questo modo:

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

Purtroppo, quando voglio chiudere il Modal utilizzando:

modalInstance.close();

Il modal sé scompare, e lo sfondo svanisce anche, ma non viene rimosso dal DOM, quindi si sovrappone a tutta la pagina lasciando la pagina non risponde.

Quando ho ispezionare, sto vedendo questo:

enter image description here

Nell'esempio nella Documentazione sulla https://angular-ui.github.io/bootstrap/#/modal La classe modal-open viene rimosso dal corpo e l'intero modal-backdrop viene rimosso dal DOM sulla fine. Perché il modale si dissolve, ma lo sfondo non viene rimosso dal DOM nel mio esempio?

Ho esaminato molte altre domande sullo sfondo dei Moduli di avvio, ma non riesco a capire cosa sta andando storto.

fonte

2015-05-12 Squrler

stai riscontrando errori nella console? –

Nessuno ... Sembra che tutto funzioni mentre il modale e lo sfondo si attenuano. Ma poi lo sfondo rimane lì ... – Squrler

Questo è apparentemente a causa di un bug. AngularUI non supporta ancora Angular 1.4. Registrando questo per i posteri: https://github.com/angular-ui/bootstrap/issues/3620 – Squrler

Questo è apparentemente a causa di un bug. AngularUI non supporta ancora Angular 1.4. Una volta risolto http://github.com/angular-ui/bootstrap/issues/3620, funzionerà.

fonte

2015-05-13 09:22:44 Squrler

Grazie mille ... il problema non è stato ancora risolto, ma disabilitando le animazioni lo sfondo viene rimosso, quindi funziona come aggirare, almeno per ora. –

Il problema è stato migrato in https://github.com/angular-ui/bootstrap/issues/3633 –

utilizzando l'interfaccia utente angolare 0.13.1 con Angular 1.4.x ha risolto questo problema. Angular UI 0.13.0 mostra questo bug. – oakfish56

Sto usando Angular versione 1.3.13 e ho un problema simile. Ho fatto ricerche il problema e che questo bug si estende a partire dalla versione 1.3.13 angolare a 1.4.1 dettagli qui https://github.com/angular-ui/bootstrap/pull/3400

E se si scorre verso il basso di quel collegamento verrà visualizzato un messaggio di fernandojunior che mostra le versioni ha testato e aggiornato per mostrare ancora lo stesso problema. Ha persino creato un plnker per simulare il problema http://plnkr.co/edit/xQOL58HDXTuvSDsHRbra e ho simulato il problema nello snippet di codice sottostante utilizzando l'esempio di codice modale 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>

fonte

2015-06-25 02:11:37 bfalz

Fino alla squadra ottiene qui allineati è un lavoro intorno.

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

Purtroppo sembra che la squadra non è sulla stessa pagina riguardo a questo problema come è stato spinto a un thread separato da un collaboratore e poi il filo è stato spinto a è stato chiuso da un altro come è stato considerato " fuori tema "da un altro.

fonte

2015-07-05 04:24:13 tuckerjt07

Ho confermato la verità dell'affermazione trovata in fondo al numero 3633 del github: "Sembra che funzioni ora con angolare 1.4.3 e angular-bootstrap 0.13.1." – oakfish56

-1

Sto anche utilizzando Angular 1.3.0 e sto anche utilizzando UI bootstrap-tpls-0.11.2 e per qualche motivo il mio problema stava accadendo quando stavo reindirizzando alla nuova pagina e lo sfondo era ancora visualizzato, quindi ho ho finito per aggiungere questo codice ...

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

che ho effettivamente trovato qui .... Hide Bootstrap 3 Modal & AngularJS redirect ($location.path)

fonte

2016-02-17 20:58:33 BV2005

Semplicemente si può fare in questo modo, prima chiudere il modal u hanno aperto

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

fondamentalmente id di modal Secondo questo per rimuovere eventuali

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

infine per chiudere sfondo

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

fonte

2017-03-22 06:57:33

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

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

fonte

2018-01-17 06:46:03 Imran

Grazie per questo snippet di codice, che potrebbe fornire una guida limitata a breve termine. Una spiegazione appropriata [migliorerebbe notevolmente] (// meta.stackexchange.com/q/114762) il suo valore a lungo termine mostrando * perché * questa è una buona soluzione al problema e lo renderebbe più utile ai futuri lettori con altre domande simili. Per favore [modifica] la tua risposta per aggiungere qualche spiegazione, incluse le ipotesi che hai fatto. –

Angular Bootstrap Modal lascia il fondale aperto

risposta

Problemi correlati