5

I was trying to navigate from a modal in a page to another page by adding a function to ng-click. When I remove the function assigned to ng-click, the data-dismiss works properly and the modal gets removed. But when I use the ng-click with a function, which redirects to an alternative page, it gets directed to the page, but the modal has not been dismissed. (the new page seems in the disabled state)

<button type="button" class="btn btn-success" ng-click="addNewProject()" 
data-dismiss="modal">Add Project</button>

The addNewProject() function redirects to the other page and adds the details in the modal to the database. I would like to know a way to get the page which was loaded later, in the editable way. (the modal should be completely removed.)

2 Answers2

13
$(".modal-backdrop").hide();

Adding the above line in the ng-click function got rid of the issue.

  • 2
    You might also need to set the `class` attribute in `body` from `modal-open` to `modal-close`: $("body").attr("class","modal-close"); – JP_smasher May 20 '16 at 09:36
1

Please have a look at http://angular-ui.github.io/bootstrap/

  1. Refer Closing Twitter Bootstrap Modal From Angular Controller

    $scope.close = function(result){ dialog.close(result); };

or

  1. use this inside ng-click function

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

Community
  • 1
  • 1
4dgaurav
  • 11,360
  • 4
  • 32
  • 59