AngularJS Modal Window Tutorial


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
9 thoughts on “AngularJS Modal Window Tutorial”
  1. 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

  2. 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

    1. 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.

Comments are closed.