Angular Bootstrap Modal leaves backdrop open

Question

I'm using AngularUI to integrate Bootstrap components in my Angular 1.4 app, such as Modals.

I'm calling a Modal in my controller like so:

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

Unfortunately, when I want to close the Modal by using:

modalInstance.close();

The modal itself dissapears, and the backdrop also fades out, but it isn't removed from the DOM, so it overlays the whole page leaving the page unresponsive.

When I inspect, I'm seeing this:

In the example in the Documentation on https://angular-ui.github.io/bootstrap/#/modal The class modal-open is removed from body and the whole modal-backdropis removed from the DOM on close. Why is the Modal fading out but the backdrop not removed from the DOM in my example?

I've checked out many of the other questions about the backdrop of bootstrap Modals but I can't seem to figure out what's going wrong.

Solution 1

This is apparently due to a bug. AngularUI doesn't support Angular 1.4 yet. Once http://github.com/angular-ui/bootstrap/issues/3620 is resolved this will work.

Solution 2

Until the team gets this sorted here is a work around.

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

Unfortunately it appears that the team is not on the same page concerning this issue as it was pushed to a separate thread by a contributor and then the thread it was pushed to was closed by another as it was considered "off topic" by another.

Solution 3

Simply you can do like this, first close the modal u have opened

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

basically id of modal Second this to remove if any

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

lastly to close backdrop

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

Solution 4

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

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

View more solutions