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. }
  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. }
  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. }
  38. if ($scope.ModalParam.showCloseButton == undefined) {
  39. $scope.ModalParam.showCloseButton = true;
  40. }
  42. if ($scope.ModalParam.showCloseButton == true) {
  43. $scope.HideCloseButton = false;
  44. }
  45. else {
  46. $scope.HideCloseButton = true;
  47. }
  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';
  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. }
  67. $scope.show = function () {
  68. $scope.showModal = true;
  69. }
  71. $scope.close = function () {
  72. $scope.showModal = false;
  73. }
  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>
  8. <script src="../PageScript/CustomCtrlApp.js"></script>
  9. <script src="../DirectiveScript/Modal.js"></script>
  10. <script src="../PageScript/ModalDemo.js"></script>
  12. <link href="../Ref/bootstrap.min.css" rel= />
  13. < type="text/css">
  14. .modal-backdrop {
  15. opacity: 0.6;
  16. }
  18. .modal-content {
  19. position: fixed;
  20. z-index: 1041;
  21. border-radius: 0;
  22. }
  24. .modal-header {
  25. padding: 0px 10px;
  26. }
  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. };
  11. $scope.toggleModal = function () {
  12. $scope.ModalArgs.method.show();
  13. };
  15. }]);
Now, run the project and the output will be as in the following:



Figure 2: Output Window