AngularJS - Closing Modal Window

Question

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?

I'm assuming you are using angular-ui's UI Bootstrap to open the modal — JeremyWeir
– JeremyWeir, Commented Oct 2, 2014 at 5:27
JeremyWeir: Pls note...i have added the includes(css/js) to the Question. — Jasper
– Jasper, Commented Oct 2, 2014 at 6:29
Do i have wrong combination of includes? I am a bit lost between twitter bootstrap (css/js) and angular bootstrap (css/js). — Jasper
– Jasper, Commented Oct 2, 2014 at 6:31
you must add ng-click to your X button.an in ng-click call a function for closing modal. — MBehtemam
– MBehtemam, Commented Oct 2, 2014 at 6:34

Mosh Feu · Accepted Answer · 2016-05-08 09:16:22Z

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>

I have included: bootstrap.css [ getbootstrap.com/2.3.2 ], and i have angular/ui-bootstrap-tpls-0.10.0.min.js from: [ angular-ui.github.io/bootstrap ] , is this a wrong combination? what do i need to get data-dismiss working?
You don't want to include the bootstrap.js if you are using angular-ui bootstrap lib. Use the ng-click handler to close the dialog like the example.

Rubi saini · Accepted Answer · 2015-06-10 06:42:42Z

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

Controller :

 $scope.closeMyPopup = function () { $modalInstance.close(); };

Nathaniel Ford · Accepted Answer · 2015-12-28 22:03:43Z

-4

I did it this way using jQuery with Angular:

jQuery('#YOURMODALID').modal('hide');

edited Dec 28, 2015 at 22:03

Nathaniel Ford

21.3k20 gold badges98 silver badges112 bronze badges

answered Dec 28, 2015 at 21:44

adal

1094 bronze badges

1 Comment

EdL Over a year ago

You shouldn't need to use jQuery with Angular for this. Not best practice either. See the accepted answer.

Collectives™ on Stack Overflow

AngularJS - Closing Modal Window

3 Answers 3

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Linked

Related