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

7 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
  4. Ajay

    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

    Reply
  5. Ajay

    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

    Reply
  6. Mo

    How to open pop file using Angular 6

    Reply
  7. Natavar

    Nice tutorial but chrome latest version Gives CORS error

    Reply

Leave a Comment

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