Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS - Closing Modal Window

My includes are:

bootstrap.css [ getbootstrap.com/2.3.2 ]
angular/ui-bootstrap-tpls-0.10.0.min.js from: [ angular-ui.github.io/bootstrap ]

I am using AngularJS and Twitter Bootstrap.

From AngularJS I open the modal window as follows:

var modalInstance = $modal.open({
              templateUrl: 'resources/html/mymodal.html',
              controller: 'mymodalController',
              scope: $scope
            });

My Modal Template is:

<div class="modal">
<
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
  </div>
.....
</div>


Question:
The close [x] button is not working
When I click on it, the modal does not go away. But when I press Esc - the modal vanishes.
So looks like ... data-dismiss="modal" is not working. Any ideas?

like image 888
Jasper Avatar asked Oct 02 '14 05:10

Jasper


People also ask

How to close the modal in angularjs?

Cancel button with data-dismiss, no ng-disabled. Send button with ng-disabled, it closes the modal manually in a default onclick.

How do I close modals?

Click the button to launch the modal. Then click on the backdrop, close icon or close button to close the modal.

How to close modal popup on button click in angularjs?

Try this code inside you smsAll method: $('#myModal'). modal('hide'); This event is provided by bootstrap, to manually hide a modal.

How to close a dialog in angularjs?

Open a dialog over the app's content. Press escape or click outside to close the dialog and send focus back to the triggering button.


2 Answers

the data-dismiss attribute is used by the bootstrap javascript (as I see you got the html source code from, http://getbootstrap.com/javascript/#modals )

UI Bootstrap won't be binding to that close button because it isn't looking for that attribute, you need to add an ng-click and dismiss the modal like in the examples

http://angular-ui.github.io/bootstrap/#/modal

in controller:

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

Modal template...

<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
like image 73
JeremyWeir Avatar answered Sep 29 '22 21:09

JeremyWeir


In angular, there is a close method of $modalInstance to close a opened modal window .

Controller :

  $scope.closeMyPopup = function () {
    $modalInstance.close();
  };
like image 20
Rubi saini Avatar answered Sep 29 '22 20:09

Rubi saini