Invoking modal window in AngularJS Bootstrap UI using JavaScript
Solution 1
OK, so first of all the http://angular-ui.github.io/bootstrap/ has a <modal>
directive and the $dialog
service and both of those can be used to open modal windows.
The difference is that with the <modal>
directive content of a modal is embedded in a hosting template (one that triggers modal window opening). The $dialog
service is far more flexible and allow you to load modal's content from a separate file as well as trigger modal windows from any place in AngularJS code (this being a controller, a service or another directive).
Not sure what you mean exactly by "using JavaScript code" but assuming that you mean any place in AngularJS code the $dialog
service is probably a way to go.
It is very easy to use and in its simplest form you could just write:
$dialog.dialog({}).open('modalContent.html');
To illustrate that it can be really triggered by any JavaScript code here is a version that triggers modal with a timer, 3 seconds after a controller was instantiated:
function DialogDemoCtrl($scope, $timeout, $dialog){
$timeout(function(){
$dialog.dialog({}).open('modalContent.html');
}, 3000);
}
This can be seen in action in this plunk: http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview
Finally, here is the full reference documentation to the $dialog
service described here:
https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md
Solution 2
To make angular ui $modal work with bootstrap 3 you need to overwrite the styles
.modal {
display: block;
}
.modal-body:before,
.modal-body:after {
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after {
display: table;
content: " ";
}
(The last ones are necessary if you use custom directives) and encapsulate the html with
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Solution 3
Open modal windows with passing data to dialog
In case if someone interests to pass data to dialog:
app.controller('ModalCtrl', function($scope, $modal) {
$scope.name = 'theNameHasBeenPassed';
$scope.showModal = function() {
$scope.opts = {
backdrop: true,
backdropClick: true,
dialogFade: false,
keyboard: true,
templateUrl : 'modalContent.html',
controller : ModalInstanceCtrl,
resolve: {} // empty storage
};
$scope.opts.resolve.item = function() {
return angular.copy(
{name: $scope.name}
); // pass name to resolve storage
}
var modalInstance = $modal.open($scope.opts);
modalInstance.result.then(function(){
//on ok button press
},function(){
//on cancel button press
console.log("Modal Closed");
});
};
})
var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {
$scope.item = item;
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
Demo Plunker
Solution 4
Quick and Dirty Way!
It's not a good way, but for me it seems the most simplest.
Add an anchor tag which contains the modal data-target and data-toggle, have an id associated with it. (Can be added mostly anywhere in the html view)
<a href="" data-toggle="modal" data-target="#myModal" id="myModalShower"></a>
Now,
Inside the angular controller, from where you want to trigger the modal just use
angular.element('#myModalShower').trigger('click');
This will mimic a click to the button based on the angular code and the modal will appear.
Solution 5
The AngularJS Bootstrap website hasn't been updated with the latest documentation. About 3 months ago pkozlowski-opensource authored a change to separate out $modal from $dialog commit is below:
https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd
In that commit he added new documentation for $modal, which can be found below:
Hope this helps!
Ahmad Alfy
I spend most of my time building stuff that works inside web browsers CTO at robustastudio.com
Updated on July 05, 2022Comments
-
Ahmad Alfy almost 2 years
Using the example mentioned here, how can I invoke the modal window using JavaScript instead of clicking a button?
I am new to AngularJS and tried searching the documentation here and here without luck.
Thanks
-
pkozlowski.opensource almost 11 years@AhmadAlfy yes, there are some options that allow you to control visual aspects of the modal. But more importantly it has many super-powers and allows you to treat $dialogs almost like AngularJS routes, pass data between the main window and the modal (and back) etc.
-
Tim Gautier over 10 yearsYeah, the readme link is broken on the angular site also. I'd really like to read that file, but I can't figure out where it's hidden. :(
-
Per Quested Aronsson over 10 yearsSeems like $dialog has been replaced by a rewritten version of $modal: github.com/angular-ui/bootstrap/tree/…
-
Mendhak over 10 years$modal readme is here.
-
keithl8041 over 10 years
-
FOR over 10 yearsFor those, like me, going back to Bootstrap 2.3.2 and Angular-UI-Bootstrap 0.5.0, I think the latest docs on the now defunct $dialog would be over here: github.com/angular-ui/bootstrap/commit/…
-
jae about 9 yearsthe links for the items don't appear in your plunker - unfortunately i'm still pretty new w/ angular to determine why.
-
Anton Manevskiy almost 8 yearsAwesome. But why you in resolve pass empty storage and then add
$scope.opts.resolve.item = function()
? -
Maxim Shoustin almost 8 yearsjust for code read. You can write for sure,
resolve:{ item: function(){return ..} }
-
Rizwan Patel almost 8 yearsi wanted to include (modal) html element in same page rather then creating external html file (externalTemplate.html'). any suggestion !
-
Saiyaff Farouk over 7 yearsIs this actually a good practice? Is this recommended or discouraged? Using this way, how it can affect the performance? Of course writing a line of code is easier than writing a whole function But, Still
-
Gagandeep Singh over 7 yearsLike I said "It's not a good way..." because it's inconsistent with the design paradigm of angular. I think it's discouraged because of that reason. For the performance part - I don't think it should cause any difference. But, again if I was the expert, I shouldn't have followed this shortcut approach. It's just a quick and dirty way to get things done. :) Do tell me if you find something regarding this.
-
VictorySaber over 7 yearsI'm new to Angular, and to get my modal up-and-running this worked very well indeed. I can come back and do it properly once I've learnt how (and this milestone deadline has passed)