UIB Modal Backdrop Not Fading In

Question

I am using an angular-ui Modal. When I close the modal, the modal box fades out and up and the backdrop fades out. This is desired behavior.

However when I open the modal, although the modal box fades in and down, the backdrop just appears without fading in. I can't determine why.

This is the code to open the modal:

$scope.update_onclick = function() {

    $rootScope.modalInstance = $uibModal.open({
        templateUrl: 'webapp/packagetracker/update.html',
        controller: 'PackageTrackerController',
        backdrop: 'static'        
    });

};

This is the backdrop DIV from Chrome's developer tools when the modal is open

<div uib-modal-backdrop="modal-backdrop" class="modal-backdrop fade ng-scope in" ng-style="{'z-index': 1040 + (index &amp;&amp; 1 || 0) + index*10}" uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" data-bootstrap-modal-aria-hidden-count="1" aria-hidden="true" style="z-index: 1040;"></div>

I'm using angularjs 1.4.8, angular-animate 1.4.8 and ui-bootstrap-tpls-2.5.0. The script tags to add these files are in that order.

Any help would be appreciated.

Jeff Howard Jeff Howard · Accepted Answer · 2017-06-17T04:18:54

It appears that this is the default behavior for the modal, as the behavior you're describing is duplicated on the UI Bootstrap modal demos: https://angular-ui.github.io/bootstrap/#!#modal

UIB Modal Backdrop Not Fading In

1 Answers