The $ modalInstance dialog box closes, but the screen remains gray and inaccessible

Question

I use angular -ui to open and close modal. When I close it with submit(object) or dismiss(message) , the dialog box closes, but the screen remains gray and I cannot access my application. Some code:

Parent controller (corresponding part):

 $scope.deleteConfirm = function(toDelete) { console.log(toDelete); var modalObj = { templateUrl: 'views/templates/delete.html', controller: 'DeleteCtrl', size: 'sm', resolve: { toDelete: function() { return toDelete; }, collection: function() { return $scope.users; } } } var modalInstance = $modal.open(modalObj); modalInstance.result.then(function (deletedItem) { console.log(deletedItem); }); 

};

Parent html:

 <button class="btn btn-danger btn-xs" ng-click="deleteConfirm(user)">X</button> 

Modal Controller:

 .controller('DeleteCtrl', ['$scope', '$modalInstance', 'toDelete', 'collection', function ($scope, $modalInstance, toDelete, collection) { $scope.toDelete = toDelete; $scope.remove = function() { collection.$remove(toDelete).then(function(ref) { $modalInstance.close(ref); }); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }]); 

Modal template:

 <div class = "ll-modal"> <div class="modal-header"> <h3 class="modal-title">Confirm Delete</h3> </div> <div class="modal-body"> Are you sure you want to delete this item? It will be gone forever. </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="remove()">Delete Permanently</button> <button class="btn btn-warning" ng-click="cancel()">Cancel</button> </div> 

Answer 1

There seems to be a problem when the modal is used with ng-animate version 1.4.x angular. Since ng-animate removes the DOM element only lazily after the transition is complete, something breaks in this thread. You can quickly fix this by disabling animation in modal settings. There is a problem in the Github magazine that says ui bootstrap is not officially supported fully with 1.4.x.

 var modalObj = { templateUrl: 'views/templates/delete.html', controller: 'DeleteCtrl', size: 'sm', animation: false, //<-- Turn off resolve: { toDelete: function() { return toDelete; }, collection: function() { return $scope.users; } } } 

or just disable it globally:

 app.config(function($modalProvider) { $modalProvider.options.animation = false; }); 

Update

If you follow the github link above, you can see that it is fixed in the latest version of ui bootstrap, i.e. update 0.13.3 or higher, the problem will be solved.

Answer 2

Now you can use Angular 1.4.x with the Bootstrap 0.13.3 user interface and the problem will be solved. Here is the dependency:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script> 

Answer 3

I worked with angular 1.4.3 angualar-ui-bootstrap 0.13 and had a problem.

The answer is PSL (remote animation) ... but no animation leads to a bad user experience (IMHO).

Returning angular to 1.3 is not an option for various reasons.

I tried downgrading ui-bootstrap from 0.13 to 0.12.1 and it worked for me

I know that ui-bootstrap 0.12.1 only supports angular 1.3 ... but everything seems to work for me with angular 1.4.3. Given that I do not use ui-bootstrap extensively, I think this is normal, but this may not work for everyone

Answer 4

here is my quick solution for this, in your modal html just paste;

 <script> $(document).ready(function () { $("button.close").click(function () { $(".modal-backdrop.fade").hide(); }); }); </script>