1

I am using an angular bootstrap modal.The modal has angular data table in the modal body and close button in the modal footer.The issue i was facing was that once i click on close button,the modal does disappear but screen remains grayed out and inaccessible.So,i included the below code.

 $('#modal-id').modal('hide');
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();

After adding this,the modal and the background works fine when i open and close it for the first time but when i open the modal for next time,the gray background does not appear. Any insight appreciated.

My controller is :

$scope.modalPop = function(){
        $scope.modalOverlay = $modal.open({
            templateUrl: 'url',
            scope: $scope,
            animation: false,
            windowClass: 'overlay-lg'
        });
    };

$scope.modalClose = function() {
        $scope.modalOverlay .close();
        $('#modal-id').modal('hide');
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
    }

where modalClose is the function on ng-click for close button in modal footer.

isherwood
  • 58,414
  • 16
  • 114
  • 157
user2138675
  • 95
  • 1
  • 2
  • 12
  • I've had something similar in the past few days. Can you create a plunkr to show off the problem? – Itamar L. Aug 07 '15 at 17:55
  • Egads. Consider http://angular-ui.github.io/bootstrap/#/modal to avoid DOM manipulation in your controller. More on that: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – isherwood Aug 07 '15 at 17:56
  • Doing DOM manipulation from controller is bad pattern..DON'T do that & why you are removing `modal-backdrop`? – Pankaj Parkar Aug 07 '15 at 18:01
  • 1
    PankajParkar I did that fix because initially the gray background was not getting disappear on click of close button. – user2138675 Aug 07 '15 at 18:08
  • @user2138675 Thats cool do add that as an answer – Pankaj Parkar Aug 07 '15 at 20:44
  • @Pankaj but i want the modal-backdrop class to get added to DOM again when the modal opens.Tried with append and detach but its not working. – user2138675 Aug 09 '15 at 08:13

0 Answers0