AngularJS Modal Window Tutorial
In this tutorial, we will see angularJS Modal Popup example using ui.bootstrap
AngularJs Dependencies:
- angular.min.js – 1.6.2
- ui-bootstrap-tpls-2.5.0.min.js: This requires the following dependencies
- bootstrap.css
- angular-animate.js
- angular-touch.js
AngularJS UI Bootstrap Modal Window:
- Created below project structure
- In Index.html:
- load the bootstrap css at header and required angular js at bottom
- Create app.js file to create angular module
- Create modalWindow.html to retrieve the html on modal popup
-
<html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>Modal Window</title> </head> <body ng-app="myApp" ng-controller="MainController"> <div class="container"> <h2>Angular Modal Window Example </h2> <button ng-click="openModal()">Click Here to open Modal</button> </div> </body> <script src="js/angular.min.js"></script> <script src="js/angular-animate.min.js"></script> <script src="js/angular-touch.min.js"></script> <script src="js/ui-bootstrap-tpls-2.5.0.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </html>
- app.js
- load the required modules ngTouch,ngAnimate and ui.bootstrap
- Create MainController and inject $uibModal as dependency
- Create function openModal() and map it on index.html with ng-click=”openModal()”
- In this invoke $uibModal.open() and provide modalWindow.html in templateUrl
- In the Controller attribute, provide ModalHandlerController, which would acts as controller for modal window.
-
var app = angular.module('myApp', ['ngTouch','ngAnimate','ui.bootstrap']); app.controller("MainController",['$scope','$uibModal',function($scope,$uibModal){ $scope.openModal = function(){ $scope.modalInstance = $uibModal.open({ ariaLabelledBy: 'modal-title', ariaDescribedBy: 'modal-body', templateUrl: 'modalWindow.html', controller :'ModelHandlerController', controllerAs: '$ctrl', size: 'lg', resolve: { } }); } }]); app.controller("ModelHandlerController",function($scope,$uibModalInstance){ $scope.cancelModal = function(){ console.log("cancelmodal"); $uibModalInstance.dismiss('close'); } $scope.ok = function(){ $uibModalInstance.close('save'); } });
- modal window.thml
- In ModalHandlerController is passed as Handler for this popup, so define below methods and map them on buttons:ok and cancel
- cancelModal
- ok
-
<div class="modal-header"> <h3 class="modal-title" id="modal-title">Modal Window Example</h3> </div> <div class="modal-body" id="modal-body"> Here Modal Body goes!!!! </div> <div class="modal-footer"> <button class="btn btn-primary" type="button" ng-click="ok()">Ok</button> <button class="btn btn-warning" type="button" ng-click="cancelModal()">Cancel</button> </div>
- In ModalHandlerController is passed as Handler for this popup, so define below methods and map them on buttons:ok and cancel
- Now run the application and you will get the below popup
9 thoughts on “AngularJS Modal Window Tutorial”
Comments are closed.
Interesting
Hello,
How can move the modal to the center of the screen
Very Nice Tutorial.
thanks this work fine but i want to put X on the right side of modal and on click that cross modal should be close but that not working
thanks this work fine but i want to put X on the right side of modal and on click that cross modal should be close but that not working
How to open pop file using Angular 6
Nice tutorial but chrome latest version Gives CORS error
How to resolve the CORS error?
angular.js:12410 Access to XMLHttpRequest at ‘file:///C:/Users/gdravi143/Downloads/Project3/modalWindow.html’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.