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.