Can’t close Angular Bootstrap Modal–Stays Gray

There is something wrong with Angular 1.4 and angular-bootstrap 0.12, 0.13 that doesn’t for the close animation for modals. The modal closes but the background stays gray. Found a couple of open tickets on it.

There’s a couple of workarounds.

On the module you can add this config where you inject the ui-bootstrap:

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

or it might be easier to modify the angular-bootstrap ui files to globally “fix” it. Though it’s a workaround as the fix closes the modal with no-animations. This fix is a little better because you still have the open animation.

I modified /scripts/angular-ui/ ui-bootstrap-tpls.js and ui-boostrap.js

From

domEl.one('$animate:close', function closeFn() {
     $rootScope.$evalAsync(afterAnimating);
});

To:

//domEl.one('$animate:close', function closeFn() {
     $rootScope.$evalAsync(afterAnimating);
//});

So if I later update angular-ui down the road and run into the same issue, I’ll have to make this change again.