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:

  1. Created below project structure Angular Modal Window
  2. 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>
  3. 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');
       
       }
       
      });
  4. 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>
  5. Now run the application and you will get the below popupAngularJS Modal Window Tutorial

3 Comments

  1. gulshan rajwani

    Interesting

    Reply
  2. Manu

    Hello,

    How can move the modal to the center of the screen

    Reply
  3. Mir

    Very Nice Tutorial.

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *