Custom Modal Control using Bootstrap CSS and AngularJS

When we want to develop a web-based application using AngularJs, it often requires a modal dialog box control with some extra features like height, width, title and so on. But like classic ASP.NET, a ready-made control is not always available in the AngularJs framework. If we want to create a custom modal dialog control, we can create it easily. Using this article, we will learn how to create a custom modal dialog control.
For that, we will first open Visual Studio and create a blank ASP.NET web application. We then need to install some NuGet packages such as AngularJs, Bootstrap and AngularUI.


Figure 1: AngularJs UI Bootstrap
 
First we will create a modal directory with the attributes. For this, create an HTML file named modal.html and add the following code to that file:
  1. <div class="modal-dialog" ng-show="showModal">    
  2.     <div class="modal-backdrop"></div>    
  3.     <div class="modal-content" >"height:{{height}};width:{{width}};left:{{left}};top:{{top}};">    
  4.         <div class="modal-header">    
  5.             <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="close();" ng-hide="HideCloseButton">×</button>    
  6.             <h4>{{ModalParam.title}}</h4>    
  7.         </div>    
  8.         <div class="modal-body" ng-transclude >"height:{{BodyHeight}};">    
  9.         </div>    
  10.     </div>    
  11. </div>   
First, we need to define the Angular app as in the following:
  1. var CustomCtrlApp = angular.module('CustomCtrlApp', ['ui.bootstrap']);  
In the script folder, add a JavaScript file named Modal.js that is basically the controller file of the modaldirectory. In the JavaScript file, add the following code:
  1. CustomCtrlApp.directive('modal'function () {  
  2.     return {  
  3.         restrict: 'EA',  
  4.         scope: {  
  5.             ModalParam: '=modalSetting'  
  6.         },  
  7.         transclude: true,  
  8.         replace: true,  
  9.         templateUrl: '../HTMLTemplate/Modal.html',  
  10.         controller: function ($scope, $element, $attrs) {  
  11.             $scope.showModal = false;  
  12.             if ($scope.ModalParam == undefined) {  
  13.                 $scope.ModalParam = {};  
  14.             }  
  15.   
  16.             if ($scope.ModalParam.width == undefined) {  
  17.                 $scope.width = '500px'  
  18.                 $scope.ModalParam.width = 500;  
  19.             }  
  20.             else {  
  21.                 if ($scope.ModalParam.width > 1000) {  
  22.                     $scope.ModalParam.width = 1000;  
  23.                 }  
  24.                 $scope.width = $scope.ModalParam.width + 'px';  
  25.             }  
  26.   
  27.             if ($scope.ModalParam.height == undefined) {  
  28.                 $scope.height = '400px'  
  29.                 $scope.ModalParam.height = 400;  
  30.             }  
  31.             else {  
  32.                 if ($scope.ModalParam.height > 900) {  
  33.                     $scope.ModalParam.height = 900;  
  34.                 }  
  35.                 $scope.height = $scope.ModalParam.height + 'px';  
  36.             }  
  37.   
  38.             if ($scope.ModalParam.showCloseButton == undefined) {  
  39.                 $scope.ModalParam.showCloseButton = true;  
  40.             }  
  41.   
  42.             if ($scope.ModalParam.showCloseButton == true) {  
  43.                 $scope.HideCloseButton = false;  
  44.             }  
  45.             else {  
  46.                 $scope.HideCloseButton = true;  
  47.             }  
  48.   
  49.             $scope.left = Math.round((screen.availWidth - $scope.ModalParam.width) / 2, 0) + 'px';  
  50.             $scope.top = Math.round((screen.availHeight - $scope.ModalParam.height - 20) / 2, 0) + 'px';  
  51.             $scope.BodyHeight = ($scope.ModalParam.height - 40) + 'px';  
  52.   
  53.             function assignModalMethod() {  
  54.                 $scope.ModalParam.method = {  
  55.                     show: function () {  
  56.                         $scope.show();  
  57.                     },  
  58.                     close: function () {  
  59.                         $scope.close();  
  60.                     },  
  61.                     setTitle: function (args) {  
  62.                         $scope.ModalParam.Title = args;  
  63.                     }  
  64.                 }  
  65.             }  
  66.   
  67.             $scope.show = function () {  
  68.                 $scope.showModal = true;  
  69.             }  
  70.   
  71.             $scope.close = function () {  
  72.                 $scope.showModal = false;  
  73.             }  
  74.   
  75.             assignModalMethod();  
  76.         }  
  77.     };  
  78. });  
Next, add an HTML page in the HTML folder named ModalDemo.html and add the following code there: 
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Model Demo</title>  
  5.     <script src="../RefScript/angular.min.js"></script>  
  6.     <script src="../RefScript/ui-bootstrap.min.js"></script>  
  7.   
  8.     <script src="../PageScript/CustomCtrlApp.js"></script>  
  9.     <script src="../DirectiveScript/Modal.js"></script>  
  10.     <script src="../PageScript/ModalDemo.js"></script>  
  11.   
  12.     <link href="../Ref/bootstrap.min.css" rel= />  
  13.     < type="text/css">  
  14.         .modal-backdrop {  
  15.             opacity: 0.6;  
  16.         }  
  17.   
  18.         .modal-content {  
  19.             position: fixed;  
  20.             z-index: 1041;  
  21.             border-radius: 0;  
  22.         }  
  23.   
  24.         .modal-header {  
  25.             padding: 0px 10px;  
  26.         }  
  27.   
  28.         .modal-body {  
  29.             overflow-y: auto;  
  30.             overflow-x: hidden;  
  31.         }  
  32.     </>  
  33. </head>  
  34. <body ng-app="CustomCtrlApp">  
  35.     <div ng-controller="ModalDemo">  
  36.         <h1>Modal example</h1>  
  37.         <button class="btn btn-default" ng-click="toggleModal()">Open modal</button>  
  38.         <div>  
  39.             <modal modal-setting="ModalArgs">  
  40.                 <table>  
  41.                     <tr>  
  42.                         <td>Welcome to Login Form</td>  
  43.                     </tr>  
  44.                 </table>                  
  45.                 <p>hello</p>  
  46.             </modal>  
  47.         </div>  
  48.     </div>  
  49. </body>  
  50. </html>  
Now to define the modaldemo controller, add another JavaScript file in the script folder named modaldemo.js with the following code: 
  1. CustomCtrlApp.controller("ModalDemo", ['$scope''$http',  
  2.     function ($scope, $http) {  
  3.         $scope.ModalArgs = {  
  4.             title: 'Modal Window',  
  5.             width: 750,  
  6.             height: 550,  
  7.             showCloseButton: true  
  8.         };  
  9.   
  10.   
  11.         $scope.toggleModal = function () {  
  12.             $scope.ModalArgs.method.show();  
  13.         };  
  14.   
  15.     }]);  
Now, run the project and the output will be as in the following:

 

Figure 2: Output Window


Similar Articles