$modalInstance dialog box closes, but screen remains grayed out and inaccessible

Question

I am using angular-ui to open and close a modal. When I close it with submit(object) or dismiss(message), the dialog box closes, but the screen rem

Answer 1

You can now use Angular 1.4.x with Bootstrap UI 0.13.3 and the issue is resolved. Here is the dependency:

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

Answer 2

I was working with angular 1.4.3 angualar-ui-bootstrap 0.13 and had the issue.

PSL answer worked (removed animation)... but no animation lead to bad user experience (IMHO).

Reverting angular to 1.3 is not an option for various reason.

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

I know ui-bootstrap 0.12.1 supports angular 1.3 only... but everything seems to works for me with angular 1.4.3. Given I don't use ui-bootstrap extensively, I guess it's OK, but this might not work for everyone

Answer 3

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

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

Answer 4

Looks like there is an issue when modal is used with 1.4.x angular version of ng-animate. Since ng-animate removes the DOM element only lazily after transition is done there is something breaking in that flow. You could quick fix it by turning off the animation in modal settings. There is an issue logged in Github which says that ui bootstrap is not yet 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 turn it off globally:

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

Update

If you follow the github link provided above you can see that it has been fixed in the latest version of ui bootstrap, i.e an upgrade of 0.13.3 or above will resolve the issue.